//----Triangle----//
@mixin triangle($dir, $color, $width, $height) {
  width: 0; height: 0;
  border-style: solid;
  @if $dir == top {
    border-width: 0 $width $height $width;
    border-color: transparent transparent $color transparent

  }@else if $dir == bottom {
    border-width: $height $width 0 $width;
    border-color: $color transparent transparent transparent
  }
  @else if $dir == left {
    border-width: $height $width $height 0;
    border-color: transparent $color transparent transparent
  }
  @else if $dir == right {
    border-width: $height 0 $height $width;
    border-color: transparent transparent transparent $color
  }
}