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.

@mixin triangle($dir, $size, $color) { border: $size transparent solid; @if ($dir == "top" or $dir == "up") { border-bottom-color: $color; } @else if ($dir == "right" or $dir == "after") { border-left-color: $color; } @else if ($dir == "bottom" or $dir == "down") { border-top-color: $color; } @else if ($dir == "left" or $dir == "before") { border-right-color: $color; } }

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.

@mixin triangle($dir, $size, $color) { border: $size transparent solid; @if ($dir == "top" or $dir == "up" or $dir == "left" or $dir == "before") { &:before { @if ($dir == "top" or $dir == "up") { border-bottom-color: $color; } @else if ($dir == "right" or $dir == "after") { border-left-color: $color; } } } @else if ($dir == "bottom" or $dir == "down" or $dir == "left" or $dir == "before") { &:after { @if ($dir == "bottom" or $dir == "down") { border-top-color: $color; } @else if ($dir == "left" or $dir == "before") { border-right-color: $color; } } } }