Welcome

カキノタblog

自分の興味あるテーマを中心に、図解多めに記事を作成していきたいと思います。

CSSで六角形を描く

Html&CSSで六角形を描くサンプルです。

css_六角形

ソースコード

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

<style>
.hexagon {
	background: burlywood;
	width: 300px;
	height: 300px;
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0% 25%);
}
</style>

説明

clip-pathプロパティのpolygon関数を使って描いています。6つの頂点のtopから時計回りで各点のx,y座標を設定しています。

参考リンク