Sass mixin to add an arrow to one side of a block Based on: http://css-tricks.com/snippets/css/css-triangle/

arrow.scss

@mixin arrow($direction, $colour, $size: 5px) {
    position: relative;

    &:before {
        content: '';
        display: block;
        position: absolute;
        width: 0;
        height: 0;
        @if $direction == up {
            top: -$size;
            left: 50%;
            margin-left: -($size/2);
            border-left: $size solid transparent;
            border-right: $size solid transparent;
            border-bottom: $size solid $colour;
        } @else if $direction == down {
            bottom: -$size;
            left: 50%;
            margin-left: -($size/2);
            border-left: $size solid transparent;
            border-right: $size solid transparent;
            border-top: $size solid $colour;
        } @else if $direction == left {
            top: 50%;
            left: -$size;
            margin-top: -($size/2);
            border-top: $size solid transparent;
            border-bottom: $size solid transparent;
            border-right: $size solid $colour;
        } @else if $direction == right {
            top: 50%;
            right: -$size;
            margin-top: -($size/2);
            border-top: $size solid transparent;
            border-bottom: $size solid transparent;
            border-left: $size solid $colour;
        }
    }
}