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:

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: {
    .arrow(right, 5em, #cccccc);

Which would compile to: {
    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: