CSS 吹き出しの作り方

clip-path でしっぽ付きの吹き出しを1要素で作るコードを、実物プレビュー付きでコピーできます。

しっぽ付きの吹き出しは、clip-path: polygon(...) にしっぽの頂点を含めることで、疑似要素を使わず1つの要素だけで作れます。本文の下に余白を空け、そこにしっぽの三角形を描くのがコツです。下にコピペ用コードを用意しました。

しっぽが中央下

吹き出し

CSS

.bubble {
  clip-path: polygon(0 0, 100% 0, 100% 75%, 58% 75%, 50% 100%, 42% 75%, 0 75%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 75%, 58% 75%, 50% 100%, 42% 75%, 0 75%);
}

しっぽが右下

吹き出し

CSS

.bubble-right {
  clip-path: polygon(0 0, 100% 0, 100% 75%, 78% 75%, 70% 100%, 62% 75%, 0 75%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 75%, 78% 75%, 70% 100%, 62% 75%, 0 75%);
}

ポイントと注意点

本文の余白：しっぽの分だけ下に余白が必要です。padding-bottom を多めにとると文字がしっぽに重なりません。
しっぽの位置：50% のX座標を左右にずらすとしっぽが移動します。微調整は clip-path ジェネレーターが簡単です。
影：clip-path は box-shadow も切り取ります。影を付けたいときは親に filter: drop-shadow() を使います。

関連