CSS3 Shapes - What's possible? [closed]

Question

I'm looking at only latest gen browsers:

• IE9 (haven't really looked into this once much)
• FF4
• Chrome10
• Safari5
• iOS 3.4
• Opera?

I know I can get squares and rectangles easy, circles and ellipsis with rounded borders (circles: W=H, ellipsis: W!=H). I know I can get slopes with border settings. I know how to get 1/2 and 1/4 circles, but is it possible to get:

• Pie wedge (any size, at any location in the circle? ie. a 18% wedge, 20% off the horizontal)
• Trapezoids, octagon, pentagon, hexagon
• Stars (n pointed stars)
• Any of the individual shapes in this that aren't already mentioned

I'm looking for CSS + DIV options, not <canvas> options. I'm also looking for options that use the least amount of nested divs. Here is an example that shows several shapes in one example...

Answer 1

Check out this page for some examples: http://css-tricks.com/examples/ShapesOfCSS/. The examples use only a single HTML element, so more would be possible with added complexity.