Sass mixin using CSS border properties to draw triangles

To is finished.

Triangle
@mixin Css-triangle ($direction: "Down", $size: 20px, $color: #000, $fillColor: #fff) {
width:0;
height:0;
position:relative;
z-index:0;
Border-left: #{settrianglesize ($direction, "left", $size)} solid #{settrianglecolor ($direction, "left", $color)};
Border-right: #{settrianglesize ($direction, "right", $size)} solid #{settrianglecolor ($direction, "right", $color)};
Border-bottom: #{settrianglesize ($direction, "bottom", $size)} solid #{settrianglecolor ($direction, "bottom", $color) };
Border-top: #{settrianglesize ($direction, "top", $size)} solid #{settrianglecolor ($direction, "top", $color)};

. #{$namespace}triangle-fill{
width:0;
height:0;
Position:absolute;
Left:-($size/2-1);
Top:-($size);
Z-index:1;
Border-left: #{settrianglesize ($direction, "left", $size)} solid #{settrianglecolor ($direction, "left", $fillColor)};
Border-right: #{settrianglesize ($direction, "right", $size)} solid #{settrianglecolor ($direction, "right", $fillColor )};
Border-bottom: #{settrianglesize ($direction, "bottom", $size)} solid #{settrianglecolor ($direction, "bottom", $ FillColor)};
Border-top: #{settrianglesize ($direction, "top", $size)} solid #{settrianglecolor ($direction, "top", $fillColor)};
}
}
@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, $size) {
@if ($direction = = "Left" or $direction = = "Right") and ($side = = "Left" or $side = = "Right"))
or ($direction = = "Up" or $direction = = "Down") and ($side = = "Top" or $side = = "Bottom")) {
@return $size/2;
} @else {
@return $size;
}
}

@function Settriangleoffset ($direction, $side, $size) {
@if ($direction = = "Left" or $direction = = "Right") and ($side = = "Left" or $side = = "Right"))
or ($direction = = "Up" or $direction = = "Down") and ($side = = "Top" or $side = = "Bottom")) {
@return $size/2;
} @else {
@return $size;
}
}

Sass mixin using CSS border properties to draw triangles