how to create this shape with only divs and css

Question

I have this shape as a PNG that I would like to create it with CSS so that I can dynamically change the fill color.

My question is: How can I most effectively recreate this image using only divs and CSS?

Note that there is a 5px white stroke around the orange fill. That stroke needs to be created as well. And the area to the right of the curve on the right needs to be transparent. Your CSS can not use external assets such as background images.

Ideally the CSS would work in the majority of browsers including IE 7, 8 and 9. But that's not absolutely required.

Go forth you CSS wizards and show me your darkest dirtiest CSS secrets. I will be putting a bounty of 50 on this as soon as the site allows me, and will award that fully to the best answer, regardless of when you submit you answer.

Let's see what you've got.

Answer 1

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

I dare you to guess which one is which without looking at the HTML ;)