_shapes.scss

// Only handles right direction for now...

.base-shape {
    display: block;
    content: '';
}

@mixin triangle($direction: down, $size: 30px, $color: black) {
    @extend .base-shape;
    width: 0;
    height: 0;
    
    @if $direction == down {
        border-left: $size/2 solid transparent;
        border-right: $size/2 solid transparent;
        border-top: $size solid $color;
        border-bottom: 0;
    } @else if $direction == right {
        border-top: $size/2 solid transparent;
        border-bottom: $size/2 solid transparent;
        border-left: $size solid $color;
        border-right: 0;
    } @else if $direction == left {
        border-top: $size/2 solid transparent;
        border-bottom: $size/2 solid transparent;
        border-right: $size solid $color;
        border-left: 0;
    } @else if $direction == up {
        border-left: $size/2 solid transparent;
        border-right: $size/2 solid transparent;
        border-bottom: $size solid $color;
        border-top: 0;
    }
}