CSS - コイン

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

HTMLコードはコインを描画する要素となる<div>タグのクラス名 "coin-icon" を設定しています。
コイン本体部分には<div>タグでクラス名”coin-body”、光沢の部分には「coin-light」を指定しています。

<div class="coin">
		<div class="coin-body"></div>
		<div class="coin-light"></div>
</div>

CSSカスタムプロパティで基準値とする図形の横幅「--w」を指定しています。

コイン部分「box-shadow」プロパティを使って立体部分を描画しています。
光沢パーツはコイン本体の「overflow: hidden」が「box-shadow」の範囲には効きませんので、別で本体と同等サイズの形状だけを作成して描画しています。

/* コインアイコン */
.coin {
	--w: 300px; /* 基準サイズ */
	position: relative;
	width: var(--w);
	height: var(--w);
}

/* コイン本体 */
.coin-body {
	position: absolute;
	top: 15%;
	left: 15%;
	width: 70%;
	height: 70%;
	background-color: #ffd700;
	box-shadow: 0 0 0 4px #e6c300, 0 0 0 8px #ffd700, 0 0 0 13px #ccad00;
	border-radius: 50%;
}

/* 光沢部分 */
.coin-light {
	position: absolute;
	top: 15%;
	left: 15%;
	width: 75%;
	height: 75%;
	border-radius: 50%;
	overflow: hidden;
}

.coin-light::before {
	content: "";
	position: absolute;
	top: -30%;
	left: 20%;
	width: 5%;
	height: 140%;
	background: rgba(255, 255, 255, 0.4);
	transform: rotate(45deg);
}

.coin-light::after {
	content: "";
	position: absolute;
	top: -20%;
	left: 25%;
	width: 15%;
	height: 140%;
	background: rgba(255, 255, 255, 0.4);
	transform: rotate(45deg);
}