Mixin for CSS triangles

Triangles.scss

@mixin arrow($size, $color, $distanceFromLeft, $position, $InsideOrOut) {
    &:after {
        content: "";
        width: 0px;
        height: 0px;
        border-left: $size solid transparent;
        border-right: $size solid transparent;


        @if $position == top and $InsideOrOut == inside {
            border-top: $size solid $color;
            top: 0;
        }
        @else if $position == top and $InsideOrOut == outside {
            border-bottom: $size solid $color;
            top: -$size;
        }
        @else if $position == bottom and $InsideOrOut == inside {
            border-bottom: $size solid $color;
            bottom: 0;
        }
        @else if $position == bottom and $InsideOrOut == outside {
            border-top: $size solid $color;
            bottom: - $size;
        }

        position: absolute;
        left: $distanceFromLeft;
    }
}