SASS @mixin for Arrows

_arrows.scss

// Demo at http://codepen.io/jondaiello/full/YWRbOx/
/* This mixin is for generating CSS arrows on a box */
@mixin box-arrow($arrowDirection, $arrowColor, $arrowSize: 10px) {
  position: relative;
  z-index: 10;

  &::after {
    content: '';
    width: 0;
    height: 0;
    display: block;
    position: absolute;
    z-index: 10;
    border: 0;

    @if $arrowDirection == bottom or $arrowDirection == top {
      border-left: $arrowSize solid transparent;
      border-right: $arrowSize solid transparent;
      margin-left: -$arrowSize;
      left: 50%;

      @if $arrowDirection == bottom {
        border-top: $arrowSize solid $arrowColor;
        bottom: -$arrowSize;
      }

      @if $arrowDirection == top {
        border-bottom: $arrowSize solid $arrowColor;
        top: -$arrowSize;
      }
    }

    @if $arrowDirection == left or $arrowDirection == right {
      border-top: $arrowSize solid transparent;
      border-bottom: $arrowSize solid transparent;
      margin-top: -$arrowSize;
      top: 50%;

      @if $arrowDirection == left {
        border-right: $arrowSize solid $arrowColor;
        left: -$arrowSize;
      }

      @if $arrowDirection == right {
        border-left: $arrowSize solid $arrowColor;
        left: auto;
        right: -$arrowSize;
      }
    }
  }
}

Took my time to rewrite it a little, to be able to add dynamic width to the arrow

@mixin box-arrow($arrowDirection, $arrowColor, $arrowWidth: 10px) {
  position: relative;
  z-index: 10;

  &::after {
    content: '';
    width: 0;
    height: 0;
    display: block;
    position: absolute;
    z-index: 10;
    border: 0;

    @if $arrowDirection == bottom or $arrowDirection == top {
      border-left: $arrowWidth solid transparent;
      border-right: $arrowWidth solid transparent;
      left:50%;
      transform:translateX(-50%);

      @if $arrowDirection == bottom {
        border-top: $arrowWidth solid $arrowColor;
        top:100%;
      }

      @if $arrowDirection == top {
        border-bottom: $arrowWidth solid $arrowColor;
        bottom:100%;
      }
    }

    @if $arrowDirection == left or $arrowDirection == right {
      border-top: $arrowWidth solid transparent;
      border-bottom: $arrowWidth solid transparent;
      transform:translateY(-50%);
      top: 50%;

      @if $arrowDirection == left {
        border-right: $arrowWidth solid $arrowColor;
         right:100%;
      }

      @if $arrowDirection == right {
        border-left: $arrowWidth solid $arrowColor;
        left:100%;
      }
    }
  }
}

See it in action

Thanks for the comment @KasperAndersson! I've updated my Gist as well to reflect an $arrowSize parameter. I had a few other comments about this too, so thanks for pointing it out.