Make arrows and triangles with CSS only - no images

So today I wanted to make an arrow like the one below but I wanted to do this with CSS and not using a background image.

As you'll know you can now make rounded corners using CSS3, but what about triangles and arrows like the one above?
The answer is to use a trick with element borders.  Essentially when you make a big border on a tiny box they intersect in a triangle like this image.

Then all you do is make three sides transparent so you see a triangle. This triangle is then added using the :afterpseudo-element to stick it onto a div box with the text inside.

Here is the CSS code for a div tag with an id="arrow" just like my blue one above.

#arrow {background-color: #3366cc; height: 30px; position: relative; width: 130px;color:#FFF;}
#arrow:after {content: ' '; height: 0; position: absolute; width: 0; border: 15px solid transparent; border-left-color: #3366cc;left: 100%;top: 0px;}