I’ve been using static images for arrows for quite some time, and as you can imagine it’s been cumbersome. You can’t modify an image triangle in any way (at least by conventional means), so as the UI gets more complex, it gets increasingly difficult to maintain them. Not to mention that they eat up a little bit of your users’ bandwidth. A very small portion, perhaps, but still.

Let me give you an example. On a website that features 4 different colors of arrows meant to be displayed in 4 different places (top, right, bottom, left) of the elements they’re placed upon, you would need to generate 16 different triangles and add them in your sprite. Now, what if your designer decides to add 2 more colors and 4 more directions (top left, top right, bottom right, bottom left)? It’s a pain, right?

Fortunately, there’s a maintainable, cross-browser (even in IE6!), pure CSS way of achieving this: borders. You may have already seen it being used on many websites, like The Verge, Gizmodo, Twitter, even Google, but it first caught my eye on Google. At first it blew my mind and I couldn’t understand how it worked, but then it dawned on me. If it boggles (or did, at some point) your mind as well, continue reading.