SCSS gist

triangle-arrow.md

playground

@function themed($color) {
  @return $color;
}

@mixin triangle-arrow($direction: up, $width, $height, $color, $borderStyle: solid) {
  width: 0;
  height: 0;
  border-style: $borderStyle;

  @if $direction == up {
    border-width: 0 $width $height $width;
    border-color: transparent transparent themed($color) transparent;
  }

  @else if $direction == down {
    border-width: $height $width 0 $width;
    border-color: themed($color) transparent transparent transparent;
  }

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

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