Transform an Element into an Arrow

The .arrow() mixin transforms any element into an arrow with pure CSS — no images or font icons are used.

This technique has been around for quite some time, and is documented by numerous sources on the Web. For example, these:

.arrow([@direction,@size,@color])
Styles an element as an arrow.

@direction – Direction the arrow should point. Possible values are up, down, left, right.
Default: down

@size – Size of the arrow (applied as border-width).
Default: 0.66em

@color – Color of the arrow (applied as border-color).
Default: white

To style a div as an arrow, for example, you could use this HTML:

<div class="my-arrow"> </div>

And apply the .arrow() mixin:

div.my-button {
    .arrow(right, 5em, #cccccc);
}

Which would compile to:

div.my-button {
    display: block;
    position: relative;
    width: 0px;
    font-size: 1em;
    line-height: 0%;
    border-style: solid;
    border-width: 5em 0 5em 5em;
    border-color: transparent transparent transparent #cccccc;
}

Resulting in:

arrow