SASS mixin to help build CSS triangles (CSS triangle hat-tip to CSS-Tricks: http://css-tricks.com/snippets/css/css-triangle/)

css-triangle-mixin.scss

@mixin css-arrow($color: #000, $size: '10px', $thickness: '5px' $direction: 'up') {
	width: 0
	height: 0 
	
	@if $direction == 'up' {
		border-right: $size solid transparent;
		border-left: $size solid transparent;
		border-bottom: $thickness solid $color;
	}

	@if $direction == 'down' {
		border-right: $size solid transparent;
		border-left: $size solid transparent;
		border-top: $thickness solid $color;
	}

	@if $direction == 'right' {
		border-top: $size solid transparent;
		border-bottom: $size solid transparent;
		border-left: $thickness solid $color;
	}

	@if $direction == 'left' {
		border-top: $size solid transparent;
		border-bottom: $size solid transparent;
		border-right: $thickness solid $color;
	}
}

sass.sass

.arrow {
	&-up    { @include arrow($direction: 'up') }
	&-down  { @include arrow($direction: 'down') }
	&-left  { @include arrow($direction: 'left') }
	&-right { @include arrow($direction: 'right') }
}

triangle.html

<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-right"></div>
<div class="arrow-left"></div>