SASS: Triangle Mixin

mixin-triangle.scss

@mixin triangle( $orientation: 'right', $size: 5px, $color: #000000 ) {

	width: 0;
	height: 0;
	$listH: right, left;
	$listV: up, down;

	@if index( $listH, $orientation ) {
		border-top: $size solid transparent;
		border-bottom: $size solid transparent;
	}

	@if index( $listV, $orientation ) {
		border-left: $size solid transparent;
		border-right: $size solid transparent;
	}

	@if $orientation == right {

		border-left-width: $size;
		border-left-style: solid;

	} @else if $orientation == left {

		border-right-width: $size;
		border-right-style: solid;

	} @else if $orientation == up {

		border-bottom-width: $size;
		border-bottom-style: solid;

	} @else if $orientation == down {

		border-top-width: $size;
		border-top-style: solid;

	}
}