Welcome

カキノタblog

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

CSSで五角形を描く

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

css_五角形

ソースコード

<style>.pentagon {
	background: gold;
	width: 300px;
	height: 300px;
	clip-path: polygon(32px 126px, 163px 32px, 293px 127px, 244px 282px, 82px 281px);
}
</style>

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

説明

clip-pathプロパティのpolygon関数を使って描いています。polygon関数で指定した座標を元にクリップされた内側だけが表示され、外側が非表示にされることで五角形になります。

参考リンク