Welcome

カキノタblog

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

CSSで八角形を描く

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

css_八角形

ソースコード

<div class="octagon"></div>

<style>
.octagon {
	background: #43D1D9;
	width: 300px;
	height: 300px;
	clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}
</style>