[HTML & CSS General] CSS: 画像をつかわない吹き出し mixin
見たことはあるけれど作り方が分からないので調べました。
Contents
調査
作り方を調べていると、ほどなく 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 上で、引数をいろいろ変えたり試せます。
便利ですね。
こういったテクニックをゼロから考えついたり、説明できたりする方はすごいよなぁ。