![](https://shimotsuki.wwwxyz.jp/wp-content/uploads/2024/06/speech-balloon-960x540.png)
擬似要素を使わずCSSで漫画の吹き出しを作る方法
CSS で漫画のような吹き出しを作る際、三角形の部分をどう実現するかが問題になります。
よくある方法なのが、背景色を設定した要素に、擬似要素で作った同じ背景色の三角形を組み合わせるというものです。
そこで今回は、擬似要素を使わない、吹き出しの作り方を紹介しようと思います。
吹き出しの HTML コード
<p>吹き出し</p>
p要素のみのシンプル極まりないコードです。
吹き出しの CSS コード
吹き出しの文章が入る四角形の部分は次のような CSS コードになります。
p {
--background-color: #fff;
background: var(--background-color);
border-radius: 16px;
box-sizing: border-box;
color: #202020;
inline-size: fit-content;
padding: 32px;
}
三角形の部分の色を設定するための変数 --background-color
があり、border-radius
で角が丸められています。
そして、問題となる三角形の部分ですが、box-shadow
で作った影を clip-path
で切り取るという方法で実現します。box-shadow
であれば、色や大きさを調整でき、border-radius
とも併用できるためです。今回はp要素の下側に高さ 16px の三角形を作ります。
まずは box-shadow
を設定します。border-radius
で丸められた部分に影ができないように設定します。
p {
…
box-shadow: 0 32px 0 -16px var(--background-color);
}
次に clip-path
で吹き出しの形に切り抜きます。
p {
…
clip-path: polygon(
0% 0%,
100% 0%,
100% 100%,
calc(50% + 8px) 100%,
50% calc(100% + 16px),
calc(50% - 8px) 100%,
0% 100%
);
}
影のサイズは、要素のサイズを元にしているため、要素が小さい場合には、影が離れたり、消えたりする場合があります。これを防ぐために、min-height
と min-width
を設定します。
p {
…
min-height: 48px;
min-width: 48px;
}
min-height
に設定する数値は、影のオフセット値 + 影の縮小値 です。今回の場合、Y軸のオフセット値が 32px で、縮小値が 16px なので、48px になります (負の値は正の値として計算します)。
min-width
に設定する数値は、border-radius
の値 (16px * 2) + 三角形の幅 (16px) の 48px になります。
コピペしやすいように CSS コードをまとめると次のようになります。
p {
--background-color: #fff;
background: var(--background-color);
border-radius: 16px;
box-sizing: border-box;
color: #202020;
inline-size: fit-content;
padding: 32px;
box-shadow: 0 32px 0 -16px var(--background-color);
clip-path: polygon(
0% 0%,
100% 0%,
100% 100%,
calc(50% + 8px) 100%,
50% calc(100% + 16px),
calc(50% - 8px) 100%,
0% 100%
);
min-height: 48px;
min-width: 48px;
}
CodePen
〆
擬似要素が便利すぎるので、たまには擬似要素を使わない方法を模索してみるのもいいですね。