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: "(";
}

Here's a fiddle.

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