概要

borderによる三角形の作成方法を応用して、次のような吹き出しを作成することができる、ということが分かったので、記録します。

borderで三角形を作成する方法

borderが幅をもつ要素であることを利用して、三角形を作成することができます。
全体のコードは以下の通り。

手順１：空要素を設定

幅・高さ０の空のボックス要素を設定。
この要素の周りにborderで枠線をセットしていきます。

手順２：borderで四角形を作ってみる

border自体に幅があるため、
次のように、borderの中の要素を高さ・幅ともに０に設定した場合、border
自体で正方形を作成することができます。

（コード）
.test{
display: block;
width:0px;
height:0;
border-top: solid 50px red;
border-right: solid 50px blue;
　}
（作成される四角形）

　topを赤、rightを青にしてみると、このようにborderの境界線が斜めになります。境界線がこのように斜めになることを応用し、三角形を作成していきます。

　手順３：三角形の斜辺に当たる部分のborderの色を透明にする

手順２にborder-leftを加え長方形を作成します。
このときに、borderの幅には作成した三角形の高さを設定します。

次に、余分な部分（三角形の斜辺を作成しているborder-leftとborder-right）の色を透明にします。

blueの設定にしていた部分を、transparentにすることで透明にすることができます。
このようにして、三角形を作成することができました。

吹き出しの作成

三角形を他のボックス要素に重ねることで吹き出しのような形を作成することができます。

手順１：適当なボックス要素を準備

吹き出しの元となるボックス要素を準備します。

手順２：準備したボックス要素にposition:relativeを設定

手順１で作成した長方形に、三角形を重ねるため、position:relativeをセットします。

手順３：同じ色の三角形を作成

吹き出しの元となるボックス要素と同じ色の三角形を作成します。
（先ほど記載した通り、borderを使用して作成）

手順４：三角形にposition:absoluteを設定

吹き出しの大きさ、位置をposition:absoluteで調整します。

吹き出しの完成です。