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

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

[markdown]
## 調査

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

> [cssarrowplease](http://cssarrowplease.com/)

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

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

> * [CSSのみ画像不要の吹き出しの作り方を若干丁寧に解説してみる | 56docブログ](http://blog.56doc.net/Entry/421/)

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

### border width で矢の形を変える

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

> * [CSSのみで三角形を作る方法を解説するよ！｜ついでに扇型や吹き出しも作ってみる – アイデアハッカー](http://ideahacker.net/2013/07/26/5962/)

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

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

> * [ボーダーで三角形などを作るときには transparent ではなく rgba() で | Unformed Building](http://unformedbuilding.com/articles/css-border-triangle-broblem-on-firefox/)

## mixin

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

試したところでは IE8+ で表示できそうです。
[Gistはこちら。](https://gist.github.com/DriftwoodJP/5a68cbba8d1ced42e8bd)
コードとサンプルはこちら。

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

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