CSSで六角形の要素を作る

300 × 259.8

259.8 × 300

このように、正六角形は辺⇔辺よりも角⇔角の方が長く、
比率が1:√3/2の長方形に内接します。
より正確に計算するにはJavaScriptが必要ですが、今回はpxで指定しています。
以下の手順で正六角形の要素を作りたいときは、
長辺の長さを決め、短辺の長さは、長辺の長さ×√3/2となります。

”.rectangle-1”では縦に辺⇔辺、
”.rectangle-2”では横に辺⇔辺となっています。

HTML
CSS
作ったもの

HTML


<div class="rectangle-1">
    <p>300 × 259.8</p>
    <div class="hexa"></div>
</div>

<div class="rectangle-2">
    <p>259.8 × 300</p>
    <div class="hexa"></div>
</div>

CSS


.rectangle-1{
	width:300px;
	height:259.8px;
	background-color:yellow;
}

.rectangle-2{
	width:259.8px;
	height:300px;
	background-color:yellow;
}

.rectangle-1 .hexa,
.rectangle-2 .hexa{
	height:100%;
	width:100%;
	background-color:lawngreen;
}

.rectangle-1 .hexa{
	clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.rectangle-2 .hexa{
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.rectangle-1 p,
.rectangle-2 p{
	position:absolute;
	z-index:1;
}