Cacher is the code snippet organizer for pro developers

// scss-lint:disable ColorVariable

/// Creates an arrow only using CSS border
///
/// Available directions:
/// * topright
/// * right
/// * bottomright
/// * bottom
/// * bottomleft
/// * left
/// * topleft
/// * top
///
/// @author Niklas Postulart
/// @group graphics
/// @param {string} direction [bottom] - direction of arrow
/// @param {hex | bool} color [#f00] - color of arrow, if false no color is set
/// @param {unit} width [20px] - width of the arrow
/// @param {unit} height [$width] - height of the arrow if omit uses $width
/// @requires arrow-color

@mixin arrow($direction: bottom, $color: #f00, $width: 20px, $height: $width) {
  $directions: (
    topright: 0 $width $height 0,
    right: $height/2 0 $height/2 $width,
    bottomright: 0 0 $height $width,
    bottom: $height $width/2 0,
    bottomleft: $height 0 0 $width,
    left: $height/2 $width $height/2 0,
    topleft: $height $width 0 0,
    top: 0 $width/2 $height
  );

  @if not map-has-key($directions, $direction) {
    @error "#{direction} is not a valid direction";
  }

  width: 0;
  height: 0;
  border-style: solid;
  border-width: map-get($directions, $direction);

  @if ($color != false) {
    @include arrow-color($direction, $color);
  }
}

/// Set CSS border arrow color
///
/// Available directions:
/// * topright
/// * right
/// * bottomright
/// * bottom
/// * bottomleft
/// * left
/// * topleft
/// * top
///
/// @author Niklas Postulart
/// @group graphics
/// @param {string} direction [bottom] - direction of arrow
/// @param {hex} color [#f00] - color of arrow

@mixin arrow-color($direction: bottom, $color: #f00) {
  $directions: (
    topright: transparent $color transparent transparent,
    right: transparent transparent transparent $color,
    bottomright: transparent transparent $color,
    bottom: $color transparent transparent,
    bottomleft: transparent transparent transparent $color,
    left: transparent $color transparent transparent,
    topleft: $color transparent transparent,
    top: transparent transparent $color
  );

  @if not map-has-key($directions, $direction) {
    @error "#{direction} is not a valid direction";
  }

  border-color: map-get($directions, $direction);
}