Customized arrows with CSS

Applying the snippet below to a simple div will display a black arrow oriented to the right. You will no longer have to create a dummy arrow png file for each direction, for each color, for each dimension, which will reduce your http request count.

How to?

Set the opposite border-side for your arrow div with a width and a color and be sure to use solid style.
Then set the other border-sides, except the one pointed by your arrow, to the same value as the opposite one, but replace their color with transparent.

.arrow-test {
    border-left: 8px solid black;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    position: absolute;
    left: 42px;
    top: 42px;
}