Mixin for css triangle
@mixin css-triangle($direction: 'right', $color: #000, $triangle_base_size: 10px, $triangle_height: ($triangle_base_size / 2)) {
width: 0;
height: 0;
@if ($direction == 'up') {
border-color: transparent transparent $color;
border-width: 0 ($triangle_base_size / 2) $triangle_height;
border-style: solid;
}
@else if ($direction == 'down') {
border-color: $color transparent transparent;
border-width: $triangle_height ($triangle_base_size / 2) 0;
border-style: solid;
}
@else if ($direction == 'left') {
border-color: transparent $color transparent transparent;
border-width: ($triangle_base_size / 2) $triangle_height ($triangle_base_size / 2) 0;
border-style: solid;
}
@else {
border-color: transparent transparent transparent $color;
border-width: ($triangle_base_size / 2) 0 ($triangle_base_size / 2) $triangle_height;
border-style: solid;
}
}