CSS だけでフキダシを作る

昔は可変長な角丸ボックスを作るだけでも、どうやって四隅に画像を置こうか、とか、画像を分けちゃうとリクエスト数が増えるから background-image でズラしながら1枚の画像でやりくりできないか、とか、それでいてどうやって HTML は Strict で Valid で、無駄な要素のない作りにするか、とか、そういう悲しいことやってたんですよ…。最高ですね border-radius は。

GitHub の Issue ページなどで、フキダシ風のボックスがあり、これが CSS だけで実現されていたので、簡単なサンプルを作ってみた。仕組みが分かれば、ボックスの上下左右どこにでもフキダシの三角形を設置できるはず。

以下のデモコードをドウゾ。フキダシボックスをカーソルに乗せると、フキダシチックになっている三角系部分の仕組みが分かるようにしてある。

• デモ : CSS Only Balloon
• コード : frontend-sandboxes/index.html at master · Neos21/frontend-sandboxes

仕組みは簡単。

フキダシの三角形を付けたいボックスに position:relative; を付与する。border-radius などは適当に指定するが、border-width は 1px の前提で。

次に、::before 擬似要素を、幅・高さ 0 でボックスの上部に絶対配置する。top はネガティブ値を指定するので、適宜ボックスに margin-top を入れておくと良い。そして幅 10px の border を付けるが、枠線色を指定するのは border-bottom のみ。それ以外は transparent (透明)。こうすることで上向きの三角形ができる。この状態でもとりあえず吹き出しチックな三角形が付いているが、まだ色がアレなので、もう少し手直し。

::after 擬似要素を作り、::before 擬似要素より 1px 下にズラして被さるように配置する。幅・高さ 0 で、border-bottom のみ、ボックスの背景色と同色にする。

こうすることで、::before 擬似要素とセットで、1px の枠線を持った三角形、みたいなものができる。このセットをボックスの上部に設置することで、フキダシのように見せるワケ。

良い時代になったもんだ…。