cssのborderプロパティで三角形を作成する

矢印や吹き出しの三角形部分を、CSSのafterやbeforeといった疑似要素で実装する機会が増えました。
毎度、細かい調整につまづいたりするので、ここでまとめておきます。

CSSで三角形を作る原理

まず、CSSで三角形を作る原理ですが、太いborderを引くと分かりやすいですよね。

width: 100px;
height: 100px;
border-top: 50px solid red;
border-right: 50px solid yellow;
border-bottom: 50px solid blue;
border-left: 50px solid green;

これに対してborder-topをなしにして、border-leftとborder-rightを無色にしてしまえば、青色の部分だけ残るわけです。

width: 100px;
height: 50px;
border-right: 50px solid transparent;
border-bottom: 50px solid blue;
border-left: 50px solid transparent;

それぞれ上下左右を向いた三角形

それぞれ上下左右を向いた三角形を実装するには、青色の三角形と同じ原理で作成可能です。

width: 100px;
height: 50px;
border-top: 50px solid red;
border-right: 50px solid transparent;
border-left: 50px solid transparent;

width: 50px;
height: 100px;
border-top: 50px solid transparent;
border-right: 50px solid yellow;
border-bottom: 50px solid transparent;

width: 50px;
height: 100px;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid green;

もちろん、rotateプロパティで回転させるのもありですよね。

三角形の角度を調整

三角形の角度を調整したいと思います。
色のついたborderの太さで高さ、transparentで指定した2つのborderの太さの合計で底辺の長さが決まります。
※必要に応じてwidth、heightも調整します。

例えば正三角形を作ってみます。
はじめに作成した青い三角形をベースに1辺100pxの正三角形にする場合、border-rightとborder-leftの合計が100pxとなるように、それぞれ半分の50pxにします。
高さは最初の4色の正方形からイメージすれば分かりやすいです。高さをborder-topとborder-bottomの合計「100×1.414≒141」にしたいわけですから、border-bottomはその半分の70.5pxにします。

width: 100px;
height: 70.5px;
border-right: 50px solid transparent;
border-bottom: 70.5px solid blue;
border-left: 50px solid transparent;

鋭い三角形を作るためには、高さを伸ばせばよいですね。

width: 100px;
height: 150px;
border-right: 50px solid transparent;
border-bottom: 150px solid blue;
border-left: 50px solid transparent;

borderを調整することでさまざまな三角形を表現することが可能です。

width: 100px;
height: 50px;
border-right: 20px solid transparent;
border-bottom: 50px solid blue;
border-left: 80px solid transparent;

CSSで三角形を表現する方法はいろいろありますが、この方法がシンプルで理解しやすく、実装しやすいなと思いました。