Sass Triangle Mixin

_triangle.scss

// https://css-tricks.com/snippets/css/css-triangle/
@mixin triangle ($color: #ccc, $direction: right, $size: 5px) {
    height: 0;
    width: 0;

    @if $direction == up {
        border-bottom: $size solid $color;
        border-left: $size solid transparent;
        border-right: $size solid transparent;
    } @else if $direction == right {
        border-bottom: $size solid transparent;
        border-left: $size solid $color;
        border-top: $size solid transparent;
    } @else if $direction == down {
        border-left: $size solid transparent;
        border-right: $size solid transparent;
        border-top: $size solid $color;
    } @else if $direction == left {
        border-bottom: $size solid transparent;
        border-right: $size solid $color;
        border-top: $size solid transparent;
    }
}