CSSで描く、少し理解しやすい吹き出しのしっぽ

Qiita株式会社 Advent Calendar 2021（2）の9日目の担当は、CX向上グループの@xrxoxcxoxです！

この記事の概要

CSS 吹き出しで調べると大抵borderを使ったテクニックが出てきます
しかし、実際に描画される大きさがパッと理解しづらくないですか？

記述量は少し増えるものの、頭で理解しやすい吹き出しのしっぽの書き方を記事にしてみました。
clip-pathを使うのがポイントです。

共通するスタイル

以下のHTML, CSSは全てに共通するので先に抜き出しておきます。

HTML

<div class="base balloon">
  clip-pathを使った吹き出し1
</div>

`css:CSS
.base {
background-color: #fff;
border-radius: 1rem;
font-weight: bold;
line-height: 1;
padding: 2rem;
position: relative;
}

.base::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
}
`

パターン1：左右対称

イメージ

よく紹介されているのは以下のようなコードです。

CSS

.balloon::after {
  border: 1rem solid transparent;
  border-top: 1rem solid #fff;
}

borderを全体に指定した上でborder-topだけオーバーライドする……。
なんとも不思議なコードですね。

clip-pathを使うとどうなるでしょう？

CSS

.balloon::after {
  background-color: #fff;
  width: 2rem;
  height: 1rem;
  clip-path: polygon(0 0, 50% 100%, 100% 0);
}

幅が2rem、高さが1remの矩形の中に0 0, 50% 100%, 100% 0の座標で点が打たれている、と多少脳内でレンダリングしやすくありませんか？

パターン2：片側に寄ってる

片側に寄ってる

よく紹介されているのは以下のようなコードです。

CSS

.balloon::after {
  border-top: 0.5rem solid #fff;
  border-right: 1rem solid transparent;
  border-bottom: 0.5rem solid transparent;
  border-left: 1rem solid #fff;
}

またなんとも不思議な感じがしますよね。

こちらもclip-pathに置き換えてみましょう。

CSS

.balloon::after {
  background-color: #fff;
  width: 2rem;
  height: 1rem;
  clip-path: polygon(0 0, 0% 100%, 100% 0);
}

先ほどとほぼ同様です。

幅が2rem、高さが1remの矩形の中に0 0, 0% 100%, 100% 0の座標で点が打たれています。

パターン1よりも更にborderのテクニックが複雑になっているのでclip-pathのシンプルさが際立っている気がします。

まとめ

• 吹き出しのしっぽをCSSで描くときはclip-pathを使うと
  • 記述量が少し増えるものの
  • デザインのモックアップを見たままコードに変換しやすい