CSS3 Moon Eclipse形状

Question

如何在CSS3中创建以下形状,而不使用像":before"这样的伪类？

我之前做过很简单,但事情是我不想在灰色区域有一个坚实的元素(参见JSFiddle - http://jsfiddle.net/aUdLr/2/)

div{
    width: 100px;
    height: 100px;
    background-color: red;
    border-radius: 100%;
    position: relative;
}
div:before{
    content: "";
    width: 100%;
    height: 110%;
    background: gray;
    position: absolute;
    left: 5px;
    top: -5%;
    border-radius: 100%;
}

Answer 1

您可以使用边框宽度:

div{
    width: 100px;
    height: 100px;
    border-radius: 100%;
    border-width: 0;
    border-left:solid 10px red;
}

科学上不准确的例子:http://jsfiddle.net/aUdLr/4/

请记住,外形不是一个完美的圆形,因为边框被添加到宽度.您可以通过减小宽度或使用来补偿Box-sizing: Border-box.