Generate css arrows on any box. Example at http://codepen.io/captDaylight/pen/MKwzLW?editors=110 Based off of http://cssarrowplease.com/

box-arrow.scss

// ARROW GENERATOR
@mixin arrow(
  $box-edge: top, 
  $arrow-size: 10px, 
  $border-width: 4px,
  $background-color: white,
  $border-color: black) {

  position: relative;
  background: $background-color;
  border: $border-width solid $border-color;

  $box-edge-inverse: bottom;
  $offset: left;
  
  @if      $box-edge == right  { $box-edge-inverse: left; $offset: top; }
  @else if $box-edge == bottom { $box-edge-inverse: top; $offset: left; }
  @else if $box-edge == left   { $box-edge-inverse: right; $offset: top; }


  &:after, &:before {
    #{$box-edge-inverse}: 100%;
    #{$offset}: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }

  &:after {
    border-color: rgba(136, 183, 213, 0);
    border-#{$box-edge-inverse}-color: $background-color;
    border-width: $arrow-size;
    margin-#{$offset}: -$arrow-size;
  }
  &:before {
    $border-offset: $arrow-size + round($border-width * 1.41421); 
    border-color: rgba(194, 225, 245, 0);
    border-#{$box-edge-inverse}-color: $border-color;
    border-width: $border-offset;
    margin-#{$offset}: -$border-offset; 
  }  
}