Blackbelt Blog Gists - SASS Triangle Mixin

sass-triangle-mixin.sass

@mixin triangle($dir, $size, $color) {
    border: $size transparent solid;

    @if ($dir == "top" or $dir == "up") {
        border-bottom-color: $color;
    }
    @else if ($dir == "right" or $dir == "after") {
        border-left-color: $color;
    }
    @else if ($dir == "bottom" or $dir == "down") {
        border-top-color: $color;
    }
    @else if ($dir == "left" or $dir == "before") {
        border-right-color: $color;
    }
}