CSS border-radius实现弯弯的月亮

代码：

<div class="moon">
    <span class="shade"></span>
</div>
<style>
    body {
        background-color: #000;
    }
    .moon {
        width: 100px;
        height: 50px;
        background-color: #fff;
        border-top-left-radius: 50px;
        border-top-right-radius: 50px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%) rotate(-150deg); /*rotate旋转必须*/
    }
    .shade {
        display: block;
        width: 100px;
        height: 30px;                       /*遮罩层的高须小于父元素的高*/
        background-color: #000;
        border-radius: 50%/100% 100% 0 0;   /*半椭圆*/
        position: relative;
        top: 21px;                          /*必须多1个px，否则会有虚线边框*/
    }
</style>

效果：