CSS - ダイヤモンド型

HTMLとCSSでダイヤモンド型の形状を作成するコード例です。

HTML要素には、ダイヤモンド型の要素となる<div>タグにクラス名 "diamond-shape" を設定しています。

<div class="diamond-shape"></div>

疑似要素「before」にてダイヤモンド型の上部、「after」にて下部を作成しています。

このコード例ではダイヤモンド型の形状を整形する為の計算をCSSのカスタムプロパティを利用しています。
CSSのカスタムプロパティでは基準値とする図形の横幅「--w」を指定しています。
「--w」をダイヤモンド型に必要なすべての値を計算しますのでサイズや形状の調節が容易です。

.diamond-shape {
	position: relative;
	--w: 300px; /* 基準サイズ */
	width: var(--w);
	height: var(--w);
}

/* Top part */
.diamond-shape::before {
	content: "";
	position: absolute;
	top: 9%;
	width: 100%;
	border-bottom: calc(var(--w) * 0.25) solid #00bfff;
	border-left: calc(var(--w) * 0.25) solid transparent;
	border-right: calc(var(--w) * 0.25) solid transparent;
	box-sizing: border-box;
}

/* Bottom part */
.diamond-shape::after {
	content: "";
	position: absolute;
	top: 34%;
	width: 100%;
	border-top: calc(var(--w) * 0.6) solid #4169e1;
	border-left: calc(var(--w) * 0.5) solid transparent;
	border-right: calc(var(--w) * 0.5) solid transparent;
	box-sizing: border-box;
}