Sass Triangle Shape Mixin

_triangle-mixin.scss

/**
 * Triangle CSS Shape
 * https://css-tricks.com/examples/ShapesOfCSS/
 * @usage @include triangle('down', 10px, #111)
 */
@mixin triangle ($direction: 'up', $size: 100px, $color: red){
  width: 0;
  height: 0;

  @if $direction == 'up' {
  	border-left: ($size / 2) solid transparent;
  	border-right: ($size / 2) solid transparent;
  	border-bottom: $size solid $color;
  }

  @else if $direction == 'down' {
  	border-left: ($size / 2) solid transparent;
  	border-right: ($size / 2) solid transparent;
  	border-top: $size solid $color;
  }

  @else if $direction == 'left' {
  	border-top: ($size / 2) solid transparent;
  	border-right: $size solid $color;
  	border-bottom: ($size / 2) solid transparent;
  }

  @else if $direction == 'right' {
  	border-top: ($size / 2) solid transparent;
  	border-left: $size solid $color;
  	border-bottom: ($size / 2) solid transparent;
  }
}