arrows.scss

// Credit goes to Don't Wake Me Up
// http://dontwakemeup.com/sass-mixin-for-pseudo-element-css-arrows/
@mixin css-arrow($arrow-position, $arrow-color, $arrow-size) {
  &:after {
    position: absolute;
    border: solid transparent;
    content: " ";
    top: auto;
    left: auto;
    height: 0;
    width: 0;
    margin: 0;
    border-color: transparent;
    border-width: $arrow-size;
    pointer-events: none;
  }
  @if $arrow-position == "top" {
    &:after {
      bottom: 100%;
      border-bottom-color: $arrow-color;
      margin-left: (-$arrow-size);
      left: 50%;
    }
  }
  @if $arrow-position == "right" {
    &:after {
      left: 100%;
      border-left-color: $arrow-color;
      margin-top: (-$arrow-size);
      top: 50%;
    }
  }
  @if $arrow-position == "bottom" {
    &:after {
      top: 100%;
      border-top-color: $arrow-color;
      margin-left: (-$arrow-size);
      left: 50%;
    }
  }
  @if $arrow-position == "left" {
    &:after {
      right: 100%;
      border-right-color: $arrow-color;
      margin-top: (-$arrow-size);
      top: 50%;
    }
  }
}

// Usage
@include css-arrow(top, red, 0.5rem);