Sass (SCSS) Mixin to create CSS triangles

css-triangle.scss

@mixin css-triangle( $width: 11px, $height: 7px, $color: '#000', $direction: 'down' ) {
	width: 0;
	height: 0;
	border-style: solid;

	@if ( $direction == 'down' ) {
		$half-width: $width / 2;
		border-width: $height $half-width 0 $half-width;
		border-color: $color transparent transparent transparent;
	}
	@else if ( $direction == 'up' ) {
		$half-width: $width / 2;
		border-width: 0 $half-width $height $half-width;
		border-color: transparent transparent $color transparent;
	}
	@else if ( $direction == 'left' ) {
		$half-height: $height / 2;
		border-width: $half-height $width $half-height 0;
		border-color: transparent $color transparent transparent;
	}
	@else if ( $direction == 'right' ) {
		$half-height: $height / 2;
		border-width: $half-height 0 $half-height $width;
		border-color: transparent transparent transparent $color;
	}
}

Usage: @include css-triangle( 11px, 7px, #8A74B9, 'down' );