This is an extremely lightweight mixin for adding CSS triangles to pseudo elements.

sass-triangles-mixin.sass

@mixin triangle($direction: "right", $size: 5px, $color: '#FFFFFF') {
  @if not index(top right bottom left, $direction) {
    @warn "\"#{$direction}\" is not a valid direction value. Value must be one of: top, right, bottom, left";
  }
  @else {
    @include transform(scale(1.01)); // @see https://brettstrikesback.com/de-pixelating-the-css-triangle/
    border: $size solid transparent;
    border-#{$direction}-color: $color;
    border-#{opposite-position($direction)}-width: 0;
    #{opposite-position($direction)}: -$size;
    content: '';
    height: 0;
    width: 0;
  }
}