CSS - 三角形

正三角形を描画するためのCSSコード例を紹介しています。

HTML要素には、三角形の要素とする<div>タグにクラス名 "triangle" を設定しています。

<div class="triangle"></div>

サンプルコードでは正三角形の底辺の長さ「border-bottom」を基準としCSSカスタムプロパティの変数「--w」に代入しています。
基準値を元に図形の高さは (2√3)/2*w 、「border-right」と「border-left:」は (2√3)*w/3 で計算しています。

.triangle {
	--w: 300px; /* 基準サイズ */
	--tw: calc(var(--w)*0.8); /* 三角形のサイズ */
	--angle: 0deg; /* 回転 */
	position: relative;
	width: var(--w);
	height: var(--w);
	transform: rotate(var(--angle));
}

.triangle::before {
	content: "";
	position: absolute;
	top: 10%;
	left: 4%;
	border-bottom: var(--tw) solid orange;
	border-right: calc(var(--tw) * 2 * 1.732 / 2 / 3) solid transparent;
	border-left: calc(var(--tw) * 2 * 1.732 / 2 / 3) solid transparent;
	box-sizing: border-box;
}