, wie diese Form mit nur divs erstellen und CSS

Question

ich diese Form als PNG habe, Ich mag wäre es mit CSS zu erstellen, so dass ich dynamisch die Füllfarbe ändern kann.

Meine Frage ist: Wie kann ich dieses Bild mit nur div s und CSS am effektivsten neu erstellen?

Beachten Sie, dass ein weißer 5x-Strich um die orangefarbene Füllung besteht. Dieser Schlaganfall muss auch erstellt werden. Und der Bereich auf der rechten Seite der Kurve muss transparent sein. Ihr CSS kann keine externen Assets wie Hintergrundbilder verwenden.

Idealerweise würde das CSS in den meisten Browsern funktionieren, einschließlich IE 7, 8 und 9. Aber das ist nicht unbedingt erforderlich.

Gehen Sie Sie CSS-Assistenten und zeigen Sie mir Ihre dunkelsten schmutzigsten CSS-Geheimnisse. Sobald die Seite es mir erlaubt, werde ich ein Kopfgeld von 50 auf dieses Konto geben und werde es in vollem Umfang zur besten Antwort geben, unabhängig davon, wann Sie Ihre Antwort einreichen.

Mal sehen, was du hast.

Answer 1

setzen nur die richtige Farbe, eventuell die Maße ändern

#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

Diese Version auch mit IE9 kompatibel ist ...

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

ich Sie es wagen, zu erraten, was man ist, die ohne die HTML-Suche;)