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来进行补偿。

Answer 2

要获得由较大圆圈黯然失色的小圆圈的效果，可以向透明元素添加阴影：

div{
    width: 100px;
    height: 100px;
    border-radius: 100%;
    background-color:transparent;
    box-shadow: -23px 0 0px -15px #ff8;
}

示例： http ： //jsfiddle.net/aUdLr/6/

Answer 3

我想到的最简单的CSS3解决方案：

div:before {
    font: 80px serif;
    color: red;
    content: "(";
}

这是一个小提琴。

（现在认真 - 如果你想对形状进行大量控制，我建议使用SVG。）