Scss mixin inspired by http://cssarrowplease.com

arrow-mixin.scss

@mixin arrow($position, $size, $color, $border-size: 0, $border-color: transparent) {
  // Box we're adding the arrow to.
  position: relative;
  background: $color;
  @if $border-size != 0 {
    border: $border-size solid $border-color;
  }

  // Swap the position around to the position we actually need.
  $center-position: left;
  @if $position == top {
    $position: bottom;
  } @else if $position == right  {
    $position: left;
    $center-position: top;
  } @else if $position == bottom  {
    $position: top;
  } @else if $position == left  {
    $position: right;
    $center-position: top;
  }

  // Main arrow and border arrow.
  @if $border-size == 0 {
    &:after, &:before {
      #{$position}: 100%;
      border: solid transparent;
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
    }
  } @else {
    &:after, &:before {
      #{$position}: 100%;
      border: solid transparent;
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
    }
  }


  // Main Arrow
  &:after {
    border-color: transparent;
    border-#{$position}-color: $color;
    border-width: $size;
    #{$center-position}: 50%;
    margin-left: -$size;
  }

  // Border arrow.
  @if $border-size != 0 {
    &:before {
      border-color: transparent;
      border-#{$position}-color: $border-color;
      border-width: $size + round($border-size * 1.41421356);
      #{$center-position}: 50%;
      margin-left: -(round(($size + ($border-size * 1.41421356))));
    }
  }
}