A Less / Sass Mixin that creates triangles for :before and :after pseudo elements

triangles.less

#triangle {
  .bottom(@color:#5c82bb,@height:5px,@width:4px) {
  	width: 0; 
  	height: 0; 
  	border-top: @height solid @color; 
  	border-left: @width solid transparent; 
  	border-right: @width solid transparent; 
  }
  .bottom-right(@color:#5c82bb,@height:5px,@width:4px) {
  	width: 0; 
  	height: 0; 
  	border-bottom: @height solid @color; 
  	border-left: @width solid transparent; 
  }
  .left(@color:#5c82bb,@height:5px,@width:4px) {
  	width: 0; 
  	height: 0; 
  	border-top: @height solid transparent; 
  	border-bottom: @height solid transparent;
  	border-right: @width solid @color; 
  }
}

triangles.scss

@mixin triangle ($direction, $color, $height, $width) {
    width: 0; 
  	height: 0;
  	@if $direction == 'bottom' {
    	border-top: $height solid $color; 
    	border-left: $width solid transparent; 
    	border-right: $width solid transparent; 
  	}
  	@if $direction == 'bottom-right' {
    	width: 0; 
    	height: 0; 
    	border-bottom: $height solid $color; 
    	border-left: $width solid transparent; 
  	}
  	@if $direction == 'left' {
    	border-top: $height solid transparent; 
    	border-bottom: $height solid transparent;
    	border-right: $width solid $color;
  	}
  	@if $direction == 'right' {
    	border-top: $height solid transparent; 
    	border-bottom: $height solid transparent;
    	border-left: $width solid $color;
  	}
  	@if $direction == 'top' {
    	border-bottom: $height solid $color; 
    	border-left: $width solid transparent; 
    	border-right: $width solid transparent; 
  	}
  	@if $direction == 'top-left' {
    	width: 0; 
    	height: 0; 
    	border-top: $height solid $color; 
    	border-right: $width solid transparent; 
  	}
}