CSS triangle indicator arrows

triangle.scss

/**
 * Create css triangle indicators
 *
 * $direction: the direction to point TO
 * $size: desired size of the borders (always creates an equilateral triangle)
 * $color: desired color of triangle
 * example: @include indicator-arrow(left, $color: '#000');
 */
@mixin indicator-arrow($direction: top, $size: .75rem, $color: #ffffff) {
	border: $size solid transparent;

	@if $direction == top {
		border-bottom: $size solid $color;
		border-top: 0;
	} @elseif $direction == bottom {
		border-bottom: 0;
		border-top: $size solid $color;
	} @elseif $direction == left {
		border-left: 0;
		border-right: $size solid $color;
	} @elseif $direction == right {
		border-left: $size solid $color;
		border-right: 0;
	}
}