CSS - Coin

Code example for drawing a simple coin icon using HTML and CSS.

The HTML code sets the class name "coin" for the <div> tag which will make up the coin icon element.
It uses "coin-body" for the coin and "coin-light" for the shine.

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

The CSS custom property "--w" sets the base size.

The coin uses "box-shadow" for the 3D effect.
The shine is a separate shape since "overflow:hidden" doesn't clip the "box-shadow".

/* Coin Icon */
.coin {
	--w: 300px; /* Base Size */
	position: relative;
	width: var(--w);
	height: var(--w);
}

/* Coin Body */
.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%;
}

/* Shine */
.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);
}