Triangle Mixin

The triangle mixin allows for you to create css triangles without the hassle. Like other mixins, usage will require that you install mustard via npm and include the source within your main SCSS file.

Example Usage:

    
        @include triangle(15px, $color-blue-500, up)
    

Mixin Code:

    
        @mixin triangle($size, $color, $direction) {
            height: 0;
            width: 0;

            $width: nth($size, 1);
            $height: nth($size, length($size));

            $width: $width / 2;
            $height: if(length($size) > 1, $height, $height/2);

            @if $direction == up {
                border-bottom: $height solid $color;
                border-left: $width solid transparent;
                border-right: $width solid transparent;

            } @else if $direction == right {
                border-left: $height solid $color;
                border-bottom: $width solid transparent;
                border-top: $width solid transparent;

            } @else if $direction == down {
                border-top: $height solid $color;
                border-left: $width solid transparent;
                border-right: $width solid transparent;

            } @else if $direction == left {
                border-right: $height solid $color;
                border-bottom: $width solid transparent;
                border-top: $width solid transparent;
            }
        }