Do you know how I could create an HTML element that looks like this:

I know I could make a circle using round corners couldn’t I? But how could I take a chunk out of the circle?
One option that is not available to me is to make an image out of this, because I actually receive an xml file that describes a pie graph & I have to render it dynamically using javascript, so the pie graph will be different each time.
The website is purely for iPad, so there are no cross browser requirements. Do you know of a CSS3 or HTML5 way I can take a chunk out of the circle element? Maybe there’s a Javascript library that draws these pie graphs?
My HTML that is a circle with borders but doesn’t remove the chunk:
<div style="border-radius: 25px; -moz-border-radius: 25px; -webkit-border-radius: 25px; color: blue; border: 3px solid green; height:45px; width: 45px;"></div>
The best way would be using SVG. However, it’s also possible using CSS3 transforms.
You can read about the matrix transform here: http://www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/