CSSでくの字や三角形を作る

令和の時代に公開するような内容でないのは重々承知しておりますが、CSSでくの字や三角形を作りたいときに毎回ネットからコピペするのが面倒だったので自分用のスニペットとして書き残しておきます。

くの字

hoge.scss

.arrow {
	&::before {
		content: "";
		display: inline-block;
		width: 15px;
		height: 15px;
		border-top: 3px solid #000;
		border-right: 3px solid #000;
		transform: rotate(45deg);
	}
}

表示

補足

widthやheightを増減させるとくの字の線の長さが、border-widthを増減させると線の太さが変わります。
向きを変えたいときはtransform: rotate();の角度を変えましょう。

三角形

hoge.scss

.triangle {
	&::before {
		content: "";
		display: inline-block;
		border: 15px solid transparent;
		border-left-color: #000;
		border-right: none;
	}
}

表示

いわゆる二等辺三角形。
底辺の長さがborder-widthの2倍になります。

補足

border-widthを増減させると三角形の大きさが変わります。
向きを変えたいときは三角形の頂点側のborder-colorを指定し、底辺側のborderをnoneに指定してあげましょう。

transform: rotate();でも向きは変えられますが、要素の位置が微妙にズレるので注意。
反転させるぐらいなら問題ないかなと思います。

おまけ

正三角形の高さ（h）を底辺の長さ（α）から割り出す場合は以下の公式を使えばいいそうです。

h = √3 / 2 * α

なので、√3をborder-widthの値に掛けてやればよさそうです。
√3は小数第6位で四捨五入して1.73205とします。

ちなみにこの公式はいま初めて知りました。

hoge.scss

.triangle2 {
	&::before {
		content: "";
		display: inline-block;
		border: 15px solid transparent;
		border-left-width: calc(15px * 1.73205);
		border-left-color: #000;
		border-right: none;
	}
}

表示

…見た感じ正三角形だな！

おわりに

個人的には、CSSの勉強というより数学の勉強になりました。
不思議ですね。