Simple mixin to create css triangles

scss-triangle-mixin.scss

// Mixin to easily create triangles
// $direction accepts up, down, left, right, top-right, top-left, bottom-right, bottom-left
// $size accepts px, em, and rem values
// $color accepts hex, rgb(a), and hsl values
@mixin triangle($direction, $size, $color) {
  // Set css triangle borders
  // Each triangle direction overrides a border
  border: $size solid transparent;

  // displays triangle pointing down
  @if $direction == bottom {
    border-top-color: $color;
  }
  // displays triangle pointing left
  @else if $direction == left {
    border-right-color: $color;
  }
  // displays triangle pointing up
  @else if $direction == top {
    border-bottom-color: $color;
  }
  // displays triangle pointing right
  @else if $direction == right {
    border-left-color: $color;
  }
  // displays triangle pointing top left
  @else if $direction == top-left {
    border-top-color: $color;
    border-left-color: $color;
  }
  // displays triangle pointing top right
  @else if $direction == top-right {
    border-top-color: $color;
    border-right-color: $color;
  }
  // displays triangle pointing bottom right
  @else if $direction == bottom-right {
    border-right-color: $color;
    border-bottom-color: $color;
  }
  // displays triangle pointing bottom left
  @else if $direction == bottom-left {
    border-bottom-color: $color;
    border-left-color: $color;
  }
}