CSS Front-End Development SASS

Authored by Dustin Horton


Useful SASS Mixins: CSS Triangle

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.