kikiki-kiki https://blog.hatena.ne.jp/kikiki-kiki/ かもメモ https://chaika.hatenablog.com/ CSS Design 三日月は地球の影が月に重なってできています。なので、CSSで三日月を描くには同じように月になる円形の上に背景色と同じ円形をずらして重ねればOKなのですが、これでは背景がパターンだったりすると困ります。 月部分以外が透過になっている三日月をCSSで描く方法を考えました。 サンプル See the Pen CSS CRESCENT MOON by KIKIKI (@chaika-design) on CodePen. 1. borderを使って描く border-radiusで作った円形の中にborderの円を作り、これをずらして不要な部分をoverflow:hiddenで隠してしまう方法 .mo… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fchaika.hatenablog.com%2Fentry%2F2017%2F06%2F13%2F072017" title="CSSで三日月を描く - かもメモ" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> https://images-fe.ssl-images-amazon.com/images/I/51itmSVj%2B8L._SL160_.jpg Hatena Blog https://hatena.blog 2017-06-13 07:20:17 rich https://chaika.hatenablog.com/entry/2017/06/13/072017 1.0 100%