CSS - Crescent Moon Shape

Code example to create a crescent moon shape using HTML and CSS.

The HTML element contains a <div> tag with the class name "crescent-moon," representing the crescent moon shape.

<div class="crescent-moon"></div>

This CSS example draws a crescent using a pseudo-element called 'before.
The CSS custom property '--w' sets the base size, while other values adjust relative to this base.

Adjust the shape of the crescent using the "box-shadow" property on a perfect circle.

.crescent-moon {
	--w: 300px; /* Base Size */
	--angle: -20deg; /* Rotation */
	position: relative;
	width: var(--w);
	height: var(--w);
}

.crescent-moon::before {
	content: "";
	position: absolute;
	top: 8.5%;
	left: 30%;
	width: calc(var(--w) / 1.4);
	height: calc(var(--w) / 1.4);
	border-radius: 50%;
	/* Shape adjustment */
	box-shadow: calc(var(--w) / (-6)) 0px 0px calc(var(--w) / 7) #ffff00;
	transform: rotate(var(--angle));
}