Triangles mixin

@mixin triangle($direction, $width, $height, $color) { width: 0; height: 0; border-style: solid; @if $direction == "top" { border-width: 0 #{$width/2}px #{$height}px #{$width/2}px; border-color: transparent transparent $color transparent; } @if $direction == "right" { border-width: #{$height/2}px 0 #{$height/2}px #{$width}px; border-color: transparent transparent transparent $color; } @if $direction == "bottom" { border-width: #{$height}px #{$width/2}px 0 #{$width/2}px; border-color: $color transparent transparent transparent; } @if $direction == "left" { border-width: #{$height/2}px #{$width}px #{$height/2}px 0; border-color: transparent $color transparent transparent; } } .arrow_right{ @include triangle('right', 100, 50, red); }