come creare questo forma con solo div e css

Question

ho questa forma come PNG che vorrei creare con i CSS in modo che possa cambiare dinamicamente il colore di riempimento.

La mia domanda è: come posso ricreare più efficacemente questa immagine utilizzando solo div se CSS?

Si noti che c'è un tratto bianco di 5px attorno al riempimento arancione. Quel tratto deve essere creato pure. E l'area a destra della curva a destra deve essere trasparente. Il tuo CSS non può utilizzare risorse esterne come le immagini di sfondo.

Idealmente il CSS funzionerebbe nella maggior parte dei browser inclusi IE 7, 8 e 9. Ma ciò non è assolutamente necessario.

Vai avanti con i maghi CSS e mostrami i tuoi segreti CSS più oscuri più sporchi. Metterò una taglia di 50 su questo non appena il sito me lo concede, e assegnerò tutto alla migliore risposta, indipendentemente da quando invii la tua risposta.

Vediamo cosa avete.

Answer 1

appena messo il colore corretto, eventualmente modificare le dimensioni

#shape { 
    width: 200px; 
    height: 150px; 
    background: orange; 
    border: 5px solid white; 
    border-radius: 15%/50%; 
    border-top-left-radius: 5px; 
    border-bottom-left-radius: 5px; 
} 

Answer 2

Questa versione è inoltre compatibile con IE9 ...

HTML

<meta http-equiv="X-UA-Compatible" content="IE=9" />​ 
<div id="image"> 
</div> 

CSS:

#image{ 
background:orange; 
border: 5px solid white; 
-moz-border-radius: 20%/60%; 
-webkit-border-radius: 20%/60%; 
border-radius: 20%/60%; 
-moz-border-top-left-radius: 0px; 
-moz-border-bottom-left-radius: 0px; 
-webkit-border-top-left-radius: 0px; 
-webkit-border-bottom-left-radius: 0px; 
border-top-left-radius: 0px; 
border-bottom-left-radius: 0px; 
height:100px; 
width:150px; 
} 

Answer 3

HTML

<div id="css"></div>​ 

CSS

#css { 
    width: 118px; 
    height: 74px; 
    margin: 20px 20px; 
    background: red; 
    border: 6px solid white; 
    border-radius: 20%/62%; 
    border-top-left-radius: 6px; 
    border-bottom-left-radius: 6px; 
} 

Live example

Ti sfido a indovinare quale è quale senza guardare il codice HTML;)