While many CSS shapes seem like just a novelty, triangles are very practical. I’ve used them as ‘active’ indicators in navigation, on tooltips, and a few other places where I’d have to use an image to match the design otherwise.
In order to cut down on repetitive CSS, I created a really flexible SASS mixin to facilitate their implementation.
The mixin takes three self-explanatory parameters: direction, size & color.
In order to keep markup as minimal as possible, I’ll usually use this mixin in conjunction with a
:before pseudo-element for a top or left arrow, and a
:after pseudo-element for a right or bottom arrow. Because of this, I use this modified version that infers usage on a pseudo element.