Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
SCSS Triangle mixin.
/*
* @include triangle within a pseudo element and add positioning properties (ie. top, left)
* $direction: up, down, left, right
*/
@mixin triangle(
$direction: 'down',
$size: 6px,
$color: #222
){
content: '';
display: block;
position: absolute;
height: 0; width: 0;
@if ($direction == 'up'){
border-bottom: $size solid $color;
border-left: 1/2 * $size solid transparent;
border-right: 1/2 * $size solid transparent;
}
@else if ($direction == 'down'){
border-top: $size solid $color;
border-left: 1/2 * $size solid transparent;
border-right: 1/2 * $size solid transparent;
}
@else if ($direction == 'left'){
border-top: 1/2 * $size solid transparent;
border-bottom: 1/2 * $size solid transparent;
border-right: $size solid $color;
}
@else if ($direction == 'right'){
border-top: 1/2 * $size solid transparent;
border-bottom: 1/2 * $size solid transparent;
border-left: $size solid $color;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment