エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
CSSだけで吹き出しデザインの尖っている部分をうまい具合に作りたい!! - arms inc. Engineers' Blog
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
CSSだけで吹き出しデザインの尖っている部分をうまい具合に作りたい!! - arms inc. Engineers' Blog
こんにちは、ユアサです。 吹き出し付きのコメントがあるようなページのコーディングをすることがありま... こんにちは、ユアサです。 吹き出し付きのコメントがあるようなページのコーディングをすることがありますが、その度に格闘していた『吹き出しの尖っている部分どう作るか問題』に(一旦)終止符を打ちたいので、今回は備忘録も兼ねて自分が考えた方法について書きたいと思います。 (吹き出しの尖っている部分ですが「ツノ」や「しっぽ」と呼ばれているらしいので、以下その呼び方で書いていきます) 調べるとよく出てくる作成方法 テキストの要素を親要素とし、擬似要素で三角形を作ってpositionプロパティで位置調整をしています。吹き出しが背景色のみなら擬似要素1つ、枠線があるものの場合は擬似要素を2つ用意して重ねることで枠線があるように見せる・・・というやり方が一般的かと思います。 See the Pen comnent01 by felly (@felly00505) on CodePen. 今回この記事でお話し