【Sass】Borderで三角形を作るCSSのMixinも作ってみた

top, top left, right, right bottom, bottom, left bottom, left, left topに使えます（全部）。
@content初めて使ってみたけどナニコレすご。

例

.triangle
  height: 10em
  width: 10em
  +triangle(bottom, 1em, 1em, red)
    left: 5em

出力

.triangle {
  height: 10em;
  width: 10em;
  position: relative;
}
.triangle::before {
  content: "";
  position: absolute;
  border-style: solid;
  left: 5em;
  bottom: -1em;
  border-width: 1em 1em 0 1em;
  border-color: red transparent transparent transparent;
}
}

Mixinコード

top, right, bottom, leftのときはその方向の外にでるようpositionの位置も出力されますが、top leftみたいな場合は迷ったので出力しないようにしました。

=triangle($direction, $width, $height, $color)
  position: relative
  &::before
    content: ''
    position: absolute
    border-style: solid
    @content
    @if $direction == 'top'
      top: -$height
      border-width: 0 $width $height $width
      border-color: transparent transparent $color transparent
    @else if $direction == 'right'
      right: -$height
      border-width: $width 0 $width $height
      border-color: transparent transparent transparent $color
    @else if $direction == 'bottom'
      bottom: -$height
      border-width: $height $width 0 $width
      border-color: $color transparent transparent transparent
    @else if $direction == 'left'
      left: -$height
      border-width: $width $height $width 0
      border-color: transparent #{ $color } transparent transparent
    @if length($direction) == 2
      $top-or-bottom: nth($direction, 1)
      $left-or-right: nth($direction, 2)
      @if $top-or-bottom == 'top'
        @if $left-or-right == 'left'
          border-width: $height $height 0 0
          border-color: $color transparent transparent transparent
        @else if $left-or-right == 'right'
          border-width: 0 $height $height 0
          border-color: transparent $color transparent transparent
      @else if $top-or-bottom == 'bottom'
        @if $left-or-right == 'left'
          border-width: $height 0 0 $height
          border-color: transparent transparent transparent $color
        @else if $left-or-right == 'right'
          border-width: 0 0 $height $height
          border-color: transparent transparent $color transparent

改良点は結構あると思う。
@content使って色々してみたい。

追記
top leftみたいなときはwidthを省略できるように変えました。

=triangle($color, $direction, $height, $width: null)
  position: relative
  &::before
    content: ''
    position: absolute
    border-style: solid
    @content
    @if $direction == 'top'
      top: -$height
      border-width: 0 $width $height $width
      border-color: transparent transparent $color transparent
    @else if $direction == 'right'
      right: -$height
      border-width: $width 0 $width $height
      border-color: transparent transparent transparent $color
    @else if $direction == 'bottom'
      bottom: -$height
      border-width: $height $width 0 $width
      border-color: $color transparent transparent transparent
    @else if $direction == 'left'
      left: -$height
      border-width: $width $height $width 0
      border-color: transparent #{ $color } transparent transparent
    @if length($direction) == 2
      $top-or-bottom: nth($direction, 1)
      $left-or-right: nth($direction, 2)
      @if $top-or-bottom == 'top'
        @if $left-or-right == 'left'
          border-width: $height $height 0 0
          border-color: $color transparent transparent transparent
        @else if $left-or-right == 'right'
          border-width: 0 $height $height 0
          border-color: transparent $color transparent transparent
      @else if $top-or-bottom == 'bottom'
        @if $left-or-right == 'left'
          border-width: $height 0 0 $height
          border-color: transparent transparent transparent $color
        @else if $left-or-right == 'right'
          border-width: 0 0 $height $height
          border-color: transparent transparent $color transparent