五角形 – css Pentagon –

「五角形」の描画。borderを使った例とbackgroundを使った例です。

borderを使った例

html

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

css

.pentagon {
	position: relative;
	width: 50px;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	border-top: 50px solid #39a9d6;
}
.pentagon:before {
	position: absolute;
	top: -96px;
	left: -25px;
	width: 0;
	height: 0;
	content: "";
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 46px solid #39a9d6;
}

backgroundを使った例

html

<div class="pentagon_g"></div>

css

.pentagon_g {
	width: 100px;
	height: 100px;
	background-image:
		linear-gradient(72deg, transparent 17px, #39a9d6 17px, #2d424f 100%),
		linear-gradient(-72deg, transparent 17px, #39a9d6 17px, #2d424f 100%),
		linear-gradient(220deg, transparent 33px, #39a9d6 33px, #2d424f 100%),
		linear-gradient(-220deg, transparent 33px, #39a9d6 33px, #2d424f 100%);
	background-position: bottom left, bottom right, top right, top left;
	background-size:
		50% 55%,
		50% 55%,
		50% 45%,
		50% 45%
		;
	background-repeat: no-repeat;
}