borderで三角形を作るSassのmixin

_triangle.scss

// @desc  ボーダーで三角形を作ります。
// @param {String} $width
// @param {String} $height
// @param {String} $direction [right]
// @param {String} $color [currentColor]
// @param {Boolean} $baseStyles [true]
// @example scss - Usage
// .triangle {
//   &:before {
//     content: "";
//     display: block;
//     @include triangle(30px, 15px, bottom, #000);

//     @include mq(md) {
//       @include triangle(50px, 25px, bottom, #000, false);
//     }
//   }
// }
// @example css - CSS output
// .triangle:before {
//   content: "";
//   display: block;
//   width: 0;
//   height: 0;
//   border-style: solid;
//   border-width: 15px 15px 0 15px;
//   border-color: #000 transparent transparent transparent
// }
// @media print, screen and (min-width: 48em) {
//   .triangle:before {
//     border-width: 25px 25px 0 25px;
//     border-color: #000 transparent transparent transparent
//   }
// }
@mixin triangle($width, $height, $direction: right, $color: currentColor, $baseStyles: true) {
  @if not index(top right bottom left top-right bottom-right bottom-left top-left, $direction) {
    @warn "$direction must be one of `top`, `right`, `bottom`, `left`, `top-right`, `bottom-right`, `bottom-left`, `top-left`; currently `#{$direction}`.";
  }

  @if $baseStyles == true {
    width: 0;
    height: 0;
    border-style: solid;
  }

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

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

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

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

  @if $direction == top-right {
    @if $width == $height {
      border-width: 0 $height $height 0;
    } @else {
      border-width: 0 $width $height 0;
    }

    border-color: transparent $color transparent transparent;
  }

  @if $direction == bottom-right {
    @if $width == $height {
      border-width: 0 0 $height $height;
    } @else {
      border-width: 0 0 $height $width;
    }

    border-color: transparent transparent $color transparent;
  }

  @if $direction == bottom-left {
    @if $width == $height {
      border-width: $height 0 0 $height;
    } @else {
      border-width: $height 0 0 $width;
    }

    border-color: transparent transparent transparent $color;
  }

  @if $direction == top-left {
    @if $width == $height {
      border-width: $height $height 0 0;
    } @else {
      border-width: $height $width 0 0;
    }

    border-color: $color transparent transparent transparent;
  }
}