擬似要素を使わず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

〆

擬似要素が便利すぎるので、たまには擬似要素を使わない方法を模索してみるのもいいですね。