SCSS pure css arrows

Please don't forget to use relative / absolute positioning for parent container.

EDIT: seems that coderwall's markdown breaks scss syntax by treating @each statemens as anchor tags, so I've posted working copy / paste friendly example here: http://cssdeck.com/labs/w7y3rec6

@mixin arrow ($w: 5px, $color: #ff8000, $position:top, $offset:50%){

    content   : '';
    position  : absolute;
    border    : $w solid transparent;

    @if $position == top{
      border-bottom-color: $color;
      top: -2 * $w;
      margin-left: -.5 * $w;
      right: $offset;
    } @else if $position == right{
      border-left-color: $color;
      right: -2 * $w;
      margin-top: -.5 * $w;
      top: $offset;

    } @else if $position == bottom{
      border-top-color: $color;
      bottom: -2 * $w;
      margin-left: -.5 * $w;
      left: $offset;

    } @else{
      // left
      border-right-color: $color;
      left: -2 * $w;
      margin-top: -.5 * $w;
      top: $offset;
    }

}