Mixin pour générer un triangle/flèche en CSS

HTML

<div class="triangles square">
<span class="foo"></span>
<span class="bar"></span>
<span class="baz"></span>
<span class="foobar"></span>
</div>

<div class="triangles isocele">
<span class="foo"></span>
<span class="bar"></span>
<span class="baz"></span>
<span class="foobar"></span>
</div>

<div class="triangles scalene">
<span class="foo"></span>
<span class="bar"></span>
<span class="baz"></span>
<span class="foobar"></span>
</div>

<div class="triangles corners">
<span class="foo"></span>
<span class="bar"></span>
<span class="baz"></span>
<span class="foobar"></span>
</div>

<div class="triangles corners-scalene">
<span class="foo"></span>
<span class="bar"></span>
<span class="baz"></span>
<span class="foobar"></span>
</div>

<p>Borders!</p>
<div class="pointer"></div>
<div class="pointer-left"></div>

SCSS

///  
/// Générer une triangle/flèche en CSS  
/// 
/// Utilise la variable `$base-font-size` comme taille de référence pour
/// la conversion
/// 
/// @param {color} $color - Couleur du triangle
/// @param {string} $direction - Direction du triangle (top | right | bottom | left | top-right | right-top | top-left | left-top | bottom-right | right-bottom | bottom-left | left-bottom)
/// @param {value} $height - Dimension du triangle (hauteur)
/// @param {value} $width - Dimension du triangle (largeur)
/// 
/// @require $color
/// @require $direction
/// @require $height
///
/// @example scss - Usage
///   .foo {
///     @include css-triangle(red, top, 30px);
///   }
/// 
/// @example css - Result
///   .foo {
///     display: inline-block;
///     border: 0 solid transparent;
///     height: 0;
///     width: 0;
///     border-bottom-color: red;
///     border-width: 0 30px 30px;
///   }
///
@mixin css-triangle($color, $direction, $height, $width:null) {
    display:inline-block;
    border:0 solid transparent;
    height:0;
    width:0;
    
    // Triangle isocèle
    @if($direction == 'top') {
        border-bottom-color:$color;
        @if($width) {
          border-width:0 ($width/2) $height;
        } @else {
          border-width:0 $height $height;  
        }
    }
    @if ($direction == 'bottom') {
        border-top-color:$color;
       @if($width) {
         border-width:$height ($width/2) 0;
        } @else {
          border-width:$height $height 0;  
        }
    }
    @if ($direction == 'right') {
        border-left-color:$color;
        @if($width) {
          border-width:($height/2) 0 ($height/2) $width;
        } @else {
          border-width:$height 0 $height $height;  
        }
    }
    @if ($direction == 'left') {
        border-right-color:$color;
        @if($width) {
          border-width:($height/2) $width ($height/2) 0;
        } @else {
          border-width:$height $height $height 0;  
        }
    }

    // Triangle scalène
 ...