CSS Arrows and Diamonds

Quick example of pure CSS power

Not that this is of much use it shows just how powerful CSS is!
There are a few spots that code like this can be applied as an alternative to using an image.

Did you know you can make an arrow out of pure CSS!

As seen in the post thumbnail, you can create arrows, diamonds and endless other shapes.

Now this is not production code here, just an example.
Here is the rough CSS

And this is the HTML

The transparent borders are the key border-top: 20px solid transparent;.
They overwrite the colored part of the border.

You can see the code in action here in this demo.
Check out the source code for that page!