CSS3 Ay Tutulması şekli

Question

nasıl gibi sözde sınıfları kullanmadan, CSS3 aşağıdaki şekil yapabilir?

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 bakınız) önce, ama şey gri alanı sağlam eleman istiyorum kalmamasıdır:

Ben çok kolay yaptığımız

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

Bilimsel olarak yanlış örnek: http://jsfiddle.net/aUdLr/4/

Sen sınır genişliği kullanabilirsiniz Sınır genişliğine eklenir çünkü dış şekli, değil mükemmel bir çember olduğunu

unutmayın. Sen genişliğini azaltan veya Box-sizing: Border-box kullanarak telafi edebilirsiniz. aklıma geliyor

Answer 2

En basit CSS3 çözeltisi:

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

Here's a fiddle.

(şeklin üzerinde kontrol iyi bir miktar istiyorsanız Şimdi seriously-, ben SVG kullanmanızı öneririz.)

Answer 3

Daha büyük bir daire tarafından tutulan küçük bir dairenin etkisini elde etmek için saydam öğeye gölge ekleyebilirsiniz:

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

Örnek: http://jsfiddle.net/aUdLr/6/