Awesome Triangle Mixin by krishna yallapanthula

triangle.scss

@mixin triangle($color, $size, $direction){
content: '';
display: block;
height: 0;
width: 0;
border: $size solid transparent;

@if($direction== 'up'){
border-top: none;
border-bottom-color: $color;
}

@if($direction== 'down'){
border-top-color: $color;
border-bottom: none;
}

@if($direction== 'right'){
border-right: none;
border-left-color: $color;
}

@if($direction== 'left'){
border-right-color: $color;
border-left: none;
}
}

writing the scss by using this mixin

.red-triangle{
@include triangle(red, 20px, left); 
}
.green-triangle{
@include triangle(#0f0, 100px, down); 
}
.blue-triangle{
@include triangle(rgba(0,0,255,.5), 80px, up); 
}