jak stworzyć ten kształt z tylko DIV i CSS

Question

mam ten kształt jako PNG, że chciałbym stworzyć go z CSS, tak że mogę dynamicznie zmieniać kolor wypełnienia.

Moje pytanie brzmi: jak najskuteczniej odtworzyć ten obraz, używając tylko div s i CSS?

Należy pamiętać, że wokół pomarańczowego wypełnienia występuje biały obrys o wielkości 5 pikseli. Trzeba również stworzyć ten udar. A obszar po prawej stronie krzywej po prawej stronie musi być przezroczysty. Twój CSS nie może korzystać z zasobów zewnętrznych, takich jak obrazy tła.

Idealnie CSS działałby w większości przeglądarek, w tym w IE 7, 8 i 9. Ale to nie jest absolutnie wymagane.

Wyjdźcie do was, czarodzieje CSS, i pokażcie swoje najciemniejsze najbrudniejsze sekrety CSS. Wrzucę do tego nagrodę w wysokości 50, gdy tylko strona mi pozwoli, i przyznaję ją w pełni do najlepszej odpowiedzi, niezależnie od tego, kiedy złożysz odpowiedź.

Zobaczmy, co masz.

Answer 1

wystarczy umieścić w odpowiednim kolorze, w końcu zmienić wymiary

#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

Ta wersja jest również kompatybilny z 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

śmiem można odgadnąć, który z nich jest który nie patrząc na HTML;)