cssで三角形を表示する方法
画像を使わずに、cssでスタイルを指定するだけで三角形を表示させる方法を紹介します。
三角形を表示させるにはborder（枠線）を使用します。
なぜborderで三角形を作れるのか、まずはその説明をします。
borderの仕組み
以下のように、上下左右に太さ10pxのborderを指定した要素を表示します。
.sample1{
border: solid 10px blue;
}以下のように表示されます。
この時、上下の色だけ赤にしたい場合、以下のようにしても、うまくいきません。
.sample2{
border: solid 10px blue;
border-top: solid 10px red;
border-bottom: solid 10px red;
}以下のように表示されます。
なぜなら、縦と横が重なる部分は、どちらかのスタイル（青か赤）を優先させてしまうわけにはいかないので、斜めで境界となるように表示されます。
この仕様を逆にうまく利用することにより、三角形を作成することができます。
三角形の表示方法
上記の例を、今度は要素を空（高さ０）にして表示させると以下のように表示されます。
左右に青い三角形が表示できました。
同様に、横幅０で表示させると、上下に赤い三角形が表示されます。
よく見かけるサンプルでは、擬似要素を使用することが多いです。
例えば、ある要素に下向きの三角形をくっつけて、吹き出しのように表示させたりします。
htmlでは以下のように定義して、
<div class="sample3">
sample3
</div>cssでは以下のように定義します。
.sample3{
/*三角形で絶対位置を指定するためにpositionを指定します*/
position: relative;
/*要素自身のスタイルを指定します*/
padding: 5px;
border-radius: 5px;
color: white;
background-color: blue;
}
.sample3::before{
/*三角形を表示させるため、要素は空（高さ０、横幅０）にします*/
content: "";
/*三角形を表示させる位置を指定します*/
position: absolute;
top: 97%;
left: 20px;
/*borderで三角形を表示させます*/
/*上部分以外は透明にすることにより、下向きの三角形を表示します*/
border: 6px solid transparent;
border-top: 6px solid blue;
}以下のように表示されます。