arrow mixin

_arrow.scss

// Mixin for creating arrows, basic usage @include arrow(top-left, #000, 15px);
// available directions: top, right, bottom, left, top-left, top-right, bottom-left, bottom-right

@mixin arrow(
  $direction,
  $color,
  $size
) {
  height: 0;
  width: 0;
  content: '';

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