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;
 }

}