8 Directions triangle mixin

@mixin triangle($dir: right, $color: #000, $width: 20px, $height: $width) { border-style: inset; @include transform(rotate(360deg)); width: 0; height: 0; border: transparent solid 0; @if $dir == top { border-bottom-width: $height; border-right-width: $width /2; border-left-width: $width /2; border-bottom-color: $color; } @else if $dir == right { border-left-width: $width; border-top-width: $height /2; border-bottom-width: $height /2; border-left-color: $color; } @else if $dir == bottom { border-top-width: $height; border-right-width: $width /2; border-left-width: $width /2; border-top-color: $color; } @else if $dir == left { border-right-width: $width; border-top-width: $height /2; border-bottom-width: $height /2; border-right-color: $color; } @else if $dir == "top right" { border-right-width: $width; border-bottom-width: $width; border-right-color: $color; } @else if $dir == "bottom right" { border-left-width: $width; border-bottom-width: $width; border-bottom-color: $color; } @else if $dir == "bottom left" { border-left-width: $width; border-top-width: $width; border-left-color: $color; } @else if $dir == "top left" { border-right-width: $width; border-top-width: $width; border-top-color: $color; } }