See the Pen line-like by ririli (@ririli) on CodePen.
吹き出しが使いたい場面って結構多いですよね。
でも実装はそんなにシンプルじゃないので画像で済ませちゃう人も多いかも。
わかってみれば意外と難しくないので挑戦してみてください。
ポイント
なんといっても下にちょっと突き出たとこ、これがやりたいわけですよね。
実装では以下が該当します。
.left:after {
position: absolute;
content: '';
top: 100%;
left: 10px;
border: 15px solid transparent;
border-top: 15px solid #e0edff;
width: 0;
height: 0;
}
具体的にはborderとborder-topですね。
borderで透明な太い線をひきます。
その上にborder-topで上だけに色をつけます。
これで三角の完成です。
あとは適切な場所に配置するだけ。
...とはいかないですよね。
なんで三角になるわけ？
おそらくborder-topを指定しただけでどうして三角形になるのか疑問が出た人も多いと思います。
かくいう僕もそうでした。
もし手元に試せる環境があったら以下のcssを当ててみてください。
border-top: 5px solid red;
border-left: 5px solid blue;
border-tight: 5px solid green;
border-bottom: 5px solid yellow;
色の違う4本の線で四角形ができたでしょうか？
では線同士がぶつかる角の部分はどうなっているでしょうか？
どちらかで埋まっているのではなく色が半分ずつになっていませんか？
これがborder-topで三角になる理由です。