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 div
s 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.