CSS | 三日月（Crescent Moon）の作り方
CSSで三日月を簡単に作成する方法を紹介しています。
三日月の作り方
自由度は低めですが、CSSのbox-shadowを使った簡単に実装できる三日月の作り方です。
See the Pen CSS | Crescent Moon by yochans (@yochans) on CodePen.
<div class="crescent-moon-1"></div>widthとheightは同じ値を指定してborder-radius: 50%で正円になるようにしておきます。
box-shadowで指定している最初の値、あるいは最後の値で、ある程度ですが形状を調節可能です。
transformのrotate()で三日月の向きを調節します。（未指定であれば、三日月は右を向きます）
.crescent-moon-1 {
position: relative;
width: 100px; /* 直径 */
height: 100px; /* 直径 */
}
.crescent-moon-1::after {
content: "";
position: absolute;
width: 100px; /* 直径 */
height: 100px; /* 直径 */
border-radius: 50%; /* 角を丸めて円にする */
box-shadow: -26px 0px 0px 20px #ffd700; /* 最初の値である程度、形状を調節可能 */
transform: rotate(-24deg); /* 角度調整 */
}上記の場合、同要素内に記述した要素は目的の場所に表示されないかもしれません。
要素の範囲内にテキストなどの要素を入れたい場合は、疑似要素を使って三日月の部分を指定します。
他要素からの影響はあるかもしれませんが、利用用途によっては疑似要素を使わずに纏めることが可能です。
.crescent-moon-1 {
width: 100px;
height: 100px;
border-radius: 50%;
box-shadow: -26px 0px 0px 20px #ffd700;
transform: rotate(-24deg);
}新しいサイト「Material Box」にて更に多くの図形・マーク・アイコンデザインを紹介しています。
CSS – 三日月型 | Material Box