SASS Triangle Mixin

_triangle.scss

/*
* $direction - top, right, bottom or left
* $width     - arrow width
* $height    - arrow height
* $color     - any color
* ---
* Inspired by: http://apps.eky.hk/css-triangle-generator/
*/
@mixin triangle($direction, $width, $height, $color) {

    width: 0;
    height: 0;
    border-style: solid;

    @if $direction == top {
        border-width: 0 $width/2 $height $width/2;
        border-color: transparent transparent $color transparent;
    } @else if $direction == top {
        border-width: $height/2 0 $height/2 $width;
        border-color: transparent transparent transparent $color;
    } @else if $direction == bottom {
        border-width: $height $width/2 0 $width/2;
        border-color:  $color transparent transparent transparent;
    } @else {
        border-width: $height/2 $width $height/2 0;
        border-color: transparent $color transparent transparent;
    }

}