CSS - 六角形

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

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

<div class="hexagon"></div>

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

・長い方の直径 : w
・短い方の直径 : w * √3
・辺の長さ : w / 2

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

.hexagon {
	position: relative;
	--w: 300px; /* 基準サイズ */
	width: var(--w);
	height: calc(var(--w) * 0.866);
}

.hexagon::before {
	content: "";
	width: var(--w);
	position: absolute;
	top: 1px;
	border-bottom: calc(var(--w) * 0.433) solid #00bfff;
	border-left: calc(var(--w) * 0.25) solid transparent;
	border-right: calc(var(--w) * 0.25) solid transparent;
	box-sizing: border-box;
}

.hexagon::after {
	content: "";
	width: var(--w);
	position: absolute;
	top: calc(var(--w) * 0.433);
	border-top: calc(var(--w) * 0.433) solid #4169e1;
	border-left: calc(var(--w) * 0.25) solid transparent;
	border-right: calc(var(--w) * 0.25) solid transparent;
	box-sizing: border-box;
}