代码:
<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>
复制代码
效果: