Small triangles have become a “thing” in user interfaces over the last couple of years. They appear everywhere from the eMarketeer home page to notification boxes on Facebook.

To images, or to css?

Assuming you’re building a site targeted to modern browsers, you’ll be very safe using CSS triangles. You can always have fall-back images.

Making triangles with CSS

Basically, we want an element with with zero width and height, but overflowing borders. Here’s an example of how to do exactly that.

Bam!

But this CSS craziness doesn’t end there – why not drop the “arrow” element completely, and have CSS automatically append an arrow to another element, like this example of drop down menu.

Go forth and abuse your CSS triangles!