CSS3 Moon Eclipse shape

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

最簡單的解決方案CSS3：

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

Here's a fiddle.

（現在seriously-如果你想在板形控制量好，我建議使用SVG）。

Answer 3

要獲得較大圓圈黯然失色的小圓圈的效果，您可以爲透明元素添加陰影：

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

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