CSS - 三日月型

HTMLとCSSで三日月の形状を作成するコード例です。

HTML要素には、三日月形の要素となる<div>タグにクラス名 "crescent-moon" を設定しています。

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

このCSSコード例では疑似要素「before」に半月を描画しています。
CSSカスタムプロパティにてサイズの基準となる「--w」を指定、他の値はこの基準値によって変動します。

正円の要素に「box-shadow」プロパティで月部分の形状を調節します。

.crescent-moon {
	--w: 300px; /* 基準サイズ */
	--angle: -20deg; /* 回転 */
	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%;
	/* 形状の調節 */
	box-shadow: calc(var(--w) / (-6)) 0px 0px calc(var(--w) / 7) #ffff00;
	transform: rotate(var(--angle));
}