CSS3 Moon Forma di eclissi

Question

Come posso creare la seguente forma in CSS3, senza usare pseudo-classi come ": before"?

ho fatto molto facile con: prima, ma la cosa è che io non voglio avere un elemento solido sulla zona grigia (vedi 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

È possibile utilizzare larghezza del bordo:

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

Scientificamente imprecisa esempio: http://jsfiddle.net/aUdLr/4/

Ricordare che la forma esterna è non un cerchio perfetto, poiché il bordo viene aggiunto alla larghezza. È possibile compensare riducendo la larghezza o utilizzando Box-sizing: Border-box.

soluzione

Answer 2

più semplice CSS3 che mi viene in mente:

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

Here's a fiddle.

(Ora serio- se si vuole una buona quantità di controllo sulla forma, suggerisco di usare SVG.)

Answer 3

Per ottenere l'effetto di un piccolo cerchio eclissato da un cerchio più grande, è possibile aggiungere un'ombra a un elemento trasparente:

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

Esempio: http://jsfiddle.net/aUdLr/6/