What shapes can you Draw in Css?

Question

I recently came across a trick for drawing triangles in css (it's the 'point' of the comment). And it's obvious how to draw a circle and rectangle/square. It seems like this would be enough to draw pretty much any shape (as long as you don't mind ignoring IE for circles)

<span class='red-triangle'></span>
<span class='blue-circle'></span>
<span class='green-square'></span>

css:

.red-triangle {
    display: block;
    height: 0;
    width: 0;
    border-bottom: 1em solid #f00;
    border-left: 1em solid transparent;   
}
.blue-circle {
    display: block;
    height: 10px;
    width: 10px;
    background-color: #00f;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    }
.green-square {
    background-color: #0f0;
    display: block;
    height: 10px;
    width: 10px;
}

What other useful and clever tricks should I know about? :)

Answer 1

Pretty much any shape you can imagine - lines, polygons, ellipses etc... See Walter Zorns library for examples and explanations of how its done using CSS sprites:

http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm

Answer 2

If you are willing to use any character at all, you can create very complicated pictures indeed: CSS Homer, animated.

Answer 3

A house!
A tree!
A polygon!

Answer 4

I took speech bubble CSS shape concept and pushed it a bit further for the CSS Typeface. Here I'm taking basic shapes - rectangle triangle and circle and then layering them to make more complex shapes.

Answer 5

A Coffee Cup