CSS - 王冠アイコン

HTMLとCSSを使用して王冠アイコンの形を描画する方法のコード例です。

このHTMLコードは王冠アイコンを描画する要素となる<div>タグのクラス名 "crown-icon" を設定しています。

<div class="crown-icon"></div>

疑似要素「before」で円形のパーツ、「after」で逆三角形のパーツを作成しています。

CSSカスタムプロパティで基準値とする図形の横幅「--w」を指定しています。
calc()を使って王冠の形に必要なすべての値を計算します。

また、コード例ではパーツ別の形状を確認する為に王冠形の左右のパーツに透過処理をしています。

.crown-icon {
	--w: 200px; /* 基準サイズ */
	position: relative;
	border-bottom: calc(var(--w) * 1.0) solid #ffa500;
	border-right: calc(var(--w) * 0.5) solid transparent;
	border-left: calc(var(--w) * 0.5) solid transparent;
	box-sizing: border-box;
}

/* 左側の三角形 */
.crown-icon::before {
	content: "";
	position: absolute;
	top: calc(var(--w) * 0.2);
	left: calc(var(--w) * (-0.86));
	border-bottom: calc(var(--w) * 0.8) solid #ffa500;
	border-right: calc(var(--w) * 0.5) solid transparent;
	border-left: calc(var(--w) * 0.5) solid transparent;
	box-sizing: border-box;
	transform: skewX(40deg);
	opacity: 0.7; /* 形状を確認するための透過 */
}

/* 右側の三角形 */
.crown-icon::after {
	content: "";
	position: absolute;
	top: calc(var(--w) * 0.2);
	left: calc(var(--w) * (-0.14));
	border-bottom: calc(var(--w) * 0.8) solid #ffa500;
	border-right: calc(var(--w) * 0.5) solid transparent;
	border-left: calc(var(--w) * 0.5) solid transparent;
	box-sizing: border-box;
	transform: skewX(-40deg);
	opacity: 0.7; /* 形状を確認するための透過 */
}