Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
SASS - MIXIN - Triangle
// Triangle helper mixin (by Yair Even-Or)
// @param {Direction} $direction - Triangle direction, either `top`, `right`, `bottom` or `left`
// @param {Color} $color [currentcolor] - Triangle color
// @param {Length} $size [1em] - Triangle size
@mixin triangle($direction, $color: currentcolor, $size: 1em) {
$size: $size/2;
$transparent: rgba($color, 0);
$opposite: (top:bottom, right:left, left:right, bottom:top);
content: '';
display: inline-block;
width: 0;
height: 0;
border: $size solid $transparent;
border-#{map-get($opposite, $direction)}-color: $color;
margin-#{$direction}: -$size/2;
Copy link

yairEO commented May 27, 2015

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment