How can I create an arrow using only CSS?

Question

I have seen the following example:

.arrow {
   height: 0;
   width: 0;
   border: 4px solid transparent;
}
.arrow.up {
   border-bottom-color: #000;
}
.arrow.down {
   border-top-color: #000;
}

http://jsfiddle.net/FrsGR/

However I cannot understand how it creates arrows. Can someone explain this for me?

Answer 1

I didn't know this trick before, but I think I understand it. The bottom border isn't square, it's beveled on the sides. A left border would be beveled on the top and bottom. This is so borders of different colors meet cleanly. Because the arrow element has 0 height and width, the border segment is as wide on the bottom as you specify in the border rule, but narrows to a width of 0px (the size of the container).

You can play with the effect by setting different border thicknesses or changing the "side" of the border rule. The "arrow" always points opposite of the direction set in the rule. The bottom border "points" up; a right border "points" left.

Here's a quick diagram:

Left is the arrow trick. Right is a more typical border where the container has some dimensions.