As originally seen here: http://cssarrowplease.com/

Arrow-Box Sass Mixin

@mixin arrow-box($direction, $color, $size)
  &:after, &:before
    @if $direction == top
      bottom: 100%
    @if $direction == bottom
      top: 100%
    @if $direction == left
      right: 100%
    @if $direction == right
      left: 100%
    border: solid transparent
    content: " "
    height: 0
    width: 0
    position: absolute
    pointer-events: none
  &:after
    border-width: $size
    @if $direction == top
      border-bottom-color: $color
      left: 50%
      margin-left: -$size
    @if $direction == bottom
      border-top-color: $color
      left: 50%
      margin-left: -$size
    @if $direction == left
      border-right-color: $color
      top: 50%
      margin-top: -$size
    @if $direction == right
      border-left-color: $color
      top: 50%
      margin-top: -$size
  &:before
    border-width: 6 + $size 
    @if $direction == top
      border-bottom-color: $color
      left: 50%
      margin-left: -($size + 6)
    @if $direction == bottom
      border-top-color: $color
      left: 50%
      margin-left: -($size + 6)
    @if $direction == left
      border-right-color: $color
      top: 50%
      margin-top: -($size + 6)
    @if $direction == right
      border-left-color: $color
      top: 50%
      margin-top: -($size + 6)