CSS3 Moon Eclipse shape

Question

"：before"のような擬似クラスを使わずに、CSS3で次のような形にするにはどうすればよいですか？

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

- （http://jsfiddle.net/aUdLr/2/ JSFiddleを参照）の前に、しかし、事は、私は灰色の領域にソリッド要素を持ってしたくないということです。

は、私はそれが非常に簡単で行いました

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/