Create pure CSS triangles in a matter of seconds with this scss mixin

_arrow.scss

/*
Kieran Venison scss mixin
[email protected]
Example usage: http://codepen.io/Kieranmv95/pen/QNYLvE
*/

// Name: Arrow
// Params: direction, color, size
@mixin arrow($arrow-direction, $arrow-color, $arrow-size){
	
	//Generic settings
	width: 0;
	height: 0;
	display: inline-block;
	
	//Arrow main statement
	@if ($arrow-direction == down){
		border-left: $arrow-size solid transparent;
		border-right: $arrow-size solid transparent;
		border-top: $arrow-size solid $arrow-color;
	} @else if ($arrow-direction == up) {
		border-left: $arrow-size solid transparent;
		border-right: $arrow-size solid transparent;
		border-bottom: $arrow-size solid $arrow-color;
	} @else if ($arrow-direction == left){
		border-top: $arrow-size solid transparent;
		border-bottom: $arrow-size solid transparent;
		border-right: $arrow-size solid $arrow-color;
	} @else if ($arrow-direction == right){
		border-top: $arrow-size solid transparent;
		border-bottom: $arrow-size solid transparent;
		border-left: $arrow-size solid $arrow-color;
	}
}

//EXAMPLE USAGE
.right {@include arrow('right', orange, 30px);} 
.down {@include arrow('down',black,30px);}
.up {@include arrow('up', blue, 60px);}
.left {@include arrow('left',red,10px);}

Updated gist with new map setting and added functional example for you :)

Remove all the map rubbish, was over-complicating something that should be simple