css-triangle.scss

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

//Utility function to return the relevant colour depending on what type of arrow it is
@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";
	}

}

@function setTriangleSize($direction, $side, $width, $height) {
 
    @if $direction == "up" and $side == "left" 
    or  $direction == "up" and $side == "right" 
    or  $direction == "down" and $side == "left" 
    or $direction == "down" and $side == "right" {
        @return $width/2
    } 
    @else if $direction == "up" and $side == "top" 
    or  $direction == "up" and $side == "bottom" 
    or  $direction == "down" and $side == "top" 
    or $direction == "down" and $side == "bottom"  {
        @return $height
    }        
    @else if $direction == "left" and $side == "top" 
    or  $direction == "left" and $side == "bottom" 
    or  $direction == "right" and $side == "top" 
    or $direction == "right" and $side == "bottom"  {
        @return $height/2
    }        
    @else {
        @return $width;
    }
}