CSSで三日月を描く

三日月は地球の影が月に重なってできています。なので、CSSで三日月を描くには同じように月になる円形の上に背景色と同じ円形をずらして重ねればOKなのですが、これでは背景がパターンだったりすると困ります。
月部分以外が透過になっている三日月をCSSで描く方法を考えました。

サンプル

See the Pen CSS CRESCENT MOON by KIKIKI (@chaika-design) on CodePen.

1. borderを使って描く

border-radiusで作った円形の中にborderの円を作り、これをずらして不要な部分をoverflow:hiddenで隠してしまう方法

.moon
  position: relative
  display: block
  margin: 2rem
  width: 10rem
  height: 10rem
  background-color: transparent
  border-radius: 50%
  overflow: hidden
  &:before
    position: absolute
    content: ''
    display: block
    top: -20px
    left: -45px
    width: 10rem
    height: 10rem
    border: 30px solid $moon-color
    border-radius: 50%

borderの円の位置をtopとleftで調整して三日月にするのですが調整が少し難しいです。

2. box-shadow を使って描く

border-radiusで作った円形の内側にbox-shadowを使って描く方法

.moon
  display: block
  margin: 2rem
  width: 10rem
  height: 10rem
  background-color: transparent
  box-shadow: inset -12px 5px 0 3px $moon-color
  border-radius: 50%