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.sass

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

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

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

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

sass.sass

.arrow-up 
	+css-arrow(#000,5px,up)

.arrow-down
	+css-arrow(#000,5px,down)

.arrow-right
	+css-arrow(#000,5px,right) 

.arrow-left 
	+css-arrow(#000,5px,left)

single-example-blue-right

.terribly-disgusting-arrow
	+css-arrow(blue,20px,right) 

single-example-blue-up

.terribly-disgusting-arrow
	+css-arrow(blue,20px,up) 

triangle.html

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

Useful mixin, thanks for sharing!