[Triangle mixin] #mixin

mixin.scss

@mixin triangle($direction, $color, $sizeW, $sizeH: $sizeW) {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;

  @if $direction == top {
    border-width: 0 ($sizeW / 2) $sizeH ($sizeW / 2);
    border-color: transparent transparent $color transparent;
  }

  @if $direction == bottom {
    border-width: $sizeH ($sizeW / 2) 0 ($sizeW / 2);
    border-color: $color transparent transparent transparent;
  }

  @if $direction == left {
    border-width: ($sizeH / 2) $sizeW ($sizeH / 2) 0;
    border-color: transparent $color transparent transparent;
  }

  @if $direction == right {
    border-width: ($sizeH / 2) 0 ($sizeH / 2) $sizeW;
    border-color: transparent transparent transparent $color;
  }

  @if $direction == topright {
    border-width: 0 $sizeH $sizeW 0;
    border-color: transparent $color transparent transparent;
  }

  @if $direction == topleft {
    border-width: $sizeH $sizeW 0 0;
    border-color: $color transparent transparent transparent;
  }

  @if $direction == bottomleft {
    border-width: $sizeH 0 0 $sizeW;
    border-color: transparent transparent transparent $color;
  }

  @if $direction == bottomright {
    border-width: 0 0 $sizeH $sizeW;
    border-color: transparent transparent $color transparent;
  }
}