CSS Triangle SASS Mixin!

css_triangle.scss

// add this to block level elements to create a nice triangle!
// derived from http://css-tricks.com/snippets/css/css-triangle/

@mixin css_triangle($dir, $size, $color) {

	width: 0; 
	height: 0; 

	@if $dir == up {		
	border-left: $size solid transparent;
	border-right: $size solid transparent;
	border-bottom: $size solid $color;
			
	} @else if $dir == down {
	border-left: $size solid transparent;
	border-right: $size solid transparent;
	border-top: $size solid $color;

	} @else if $dir == left {
	border-top: $size solid transparent;
	border-bottom: $size solid transparent; 
	border-right: $size solid $color;			 		

	} @else if $dir == right {
	border-top: $size solid transparent;
	border-bottom: $size solid transparent;
	border-left: $size solid $color;	
	}
}