@mixin triangle.scss

//==== SCSS mixin to create CSS triangles
//==== Examples:
//====   @include triangle ("up", #fff, 10px, 20px); 
//====   @include triangle("up", #000, 20px);
@mixin triangle ($direction: "down", $color: #000, $width: 20px, $height: $width ) {
    width: 0; 
    height: 0;
    border-left:    #{setTriangleSide($direction, "left",   $width, $height, $color)};
    border-right:   #{setTriangleSide($direction, "right",  $width, $height, $color)};
    border-bottom:  #{setTriangleSide($direction, "down",   $width, $height, $color)};
    border-top:     #{setTriangleSide($direction, "top",    $width, $height, $color)};
}

// Utility function for each side of border, calling functions to get each border property
@function setTriangleSide($direction, $side, $width, $height, $color) {
    $border-width : #{setTriangleSize($direction, $side, $width, $height)};
    $border-color : #{setTriangleColor($direction, $side, $color)};
    @return $border-width solid $border-color
}

// Utility function to return the relevant border-width depending on arrow direction
@function setTriangleSize($direction, $side, $width, $height) {
    @if $direction == $side {
        @return 0
    } @else {
        @if $direction == "left" {
            @if $side == "right" {
                @return $width
            } @else {
                @return ($height / 2)
            }
        } @else if $direction == "right" {
            @if $side == "left" {
                @return $width
            } @else {
                @return ($height / 2)
            }
        } @else if $direction == "top" {
            @if $side == "down" {
                @return $height
            } @else {
                @return ($width / 2)
            }
        } @else if $direction == "down" {
            @if $side == "top" {
                @return $height
            } @else {
                @return ($width / 2)
            }
        }
    }
}

//Utility function to return the relevant border-width depending on arrow direction
@function setTriangleColor($direction, $side, $color) {
    @if $direction == "left" and $side == "right" 
    or  $direction == "right" and $side == "left" 
    or $direction == "down" and $side == "top" 
    or $direction == "up" and $side == "bottom" {
        @return $color
    } @else {
        @return "transparent";
    }
}