CSS - 五角形

HTMLとCSSで五角形の形状を作成するコード例です。

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

<div class="pentagon"></div>

このコード例では五角形の形状を整形する為の計算をCSSのカスタムプロパティを利用しています。
基準値とする図形の横幅「--w」を指定する事で、五角形に必要なすべての値を計算します。

また、パーツ別の形状を確認する為に五角形の上部と下部で別の色を指定しています。

.pentagon {
	position: relative;
	--w: 300px; /* 基準サイズ */
	--h: calc(var(--w) * 0.952);
	width: var(--w);
	height: var(--h);
	box-sizing: border-box;
}

.pentagon::before {
	content: "";
	position: absolute;
	width: var(--w);
	height: calc(var(--h) * 0.38);
	border-left: calc(var(--w) * 0.5) solid transparent;
	border-right: calc(var(--w) * 0.5) solid transparent;
	border-bottom: calc(var(--h) * 0.38) solid #00bfff;
	box-sizing: border-box;
}

.pentagon::after {
	content: "";
	position: absolute;
	top: calc(var(--h) * 0.38);
	width: var(--w);
	height: calc(var(--h) * 0.62);
	border-top: calc(var(--h) * 0.62) solid #4169e1;
	border-left: calc(var(--w) * 0.19) solid transparent; 
	border-right:  calc(var(--w) * 0.19) solid transparent;
	box-sizing: border-box;
}