[HTML & CSS General] CSS: 画像をつかわない吹き出し mixin

見たことはあるけれど作り方が分からないので調べました。

調査

作り方を調べていると、ほどなく cssarrowplease という素敵なジェネレータを知りました。
キレイなコードが生成されるので、ここからいろいろ勉強しました。

cssarrowplease

疑似要素のボーダーで矢を描画する

そもそも矢をどうやって描画しているのかというと、サイズのないボックスのボーダーでした。
最初に発見した人は、どうやって思いついたんだろう。。。

吹き出しを線のみで表現したい場合は、:before, :after を使って重ねるんですね。

border width で矢の形を変える

矢の形のバリエーションは、このボーダーの太さ等を変えて出しているとか。
他いろいろありそうで奥が深い。

rgba 指定を追加すると線がなめらかになる

rgba 指定が追加でされていた理由が分からなかったのですが、こういった理由があるそう。
transparent も残っているので、IE8 の fallback になっているということですね。

mixin

いろいろな場面で利用できそうな気がしたので、勉強をかねて mixin を作ってみました。
もろもろ以下にアップしました。

試したところでは IE8+ で表示できそうです。
Gistはこちら。
コードとサンプルはこちら。

See the Pen CSS Arrow by DriftwoodJP (@DriftwoodJP) on CodePen.

CODEPEN 上で、引数をいろいろ変えたり試せます。
便利ですね。
こういったテクニックをゼロから考えついたり、説明できたりする方はすごいよなぁ。