Felly00505 https://blog.hatena.ne.jp/Felly00505/ arms inc. Engineers' Blog https://tech.arms-soft.co.jp/ CSS フロントエンド こんにちは、ユアサです。 吹き出し付きのコメントがあるようなページのコーディングをすることがありますが、その度に格闘していた『吹き出しの尖っている部分どう作るか問題』に（一旦）終止符を打ちたいので、今回は備忘録も兼ねて自分が考えた方法について書きたいと思います。 （吹き出しの尖っている部分ですが「ツノ」や「しっぽ」と呼ばれているらしいので、以下その呼び方で書いていきます） 調べるとよく出てくる作成方法 テキストの要素を親要素とし、擬似要素で三角形を作ってpositionプロパティで位置調整をしています。吹き出しが背景色のみなら擬似要素1つ、枠線があるものの場合は擬似要素を2つ用意して重ねること… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Ftech.arms-soft.co.jp%2Fentry%2F2023%2F12%2F13%2F090000" title="CSSだけで吹き出しデザインの尖っている部分をうまい具合に作りたい！！ - arms inc. Engineers&#39; Blog" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> https://cdn-ak.f.st-hatena.com/images/fotolife/F/Felly00505/20231212/20231212170717.jpg Hatena Blog https://hatena.blog 2023-12-13 09:00:00 rich https://tech.arms-soft.co.jp/entry/2023/12/13/090000 1.0 100%