Easy creation of CSS-only directional arrows

arrow-scss-mixin.scss

// Arrow SCSS Mixin
//
// Easy creation of CSS-only directional arrows
//
// .arrow {
//   @include arrow(100px, #f60, up);
// }


@mixin arrow($size: 10px, $color: inherit, $direction: down) {
    display: inline-block;
    width: 0;
    height: 0;
    $size: $size/2;
    border: $size solid transparent;
    @if $direction == down {
        $direction: 'top';
    } @elseif $direction == up {
        $direction: 'bottom';
    } @elseif $direction == left {
        $direction: 'right';
    } @elseif $direction == right {
        $direction: 'left';
    } @else {
        $direction: "top";
    }
    border-#{$direction}-color: $color;
}