LESS Triangle

triangle.less

// source https://css-tricks.com/snippets/css/css-triangle/

.square(@size) {
    width: @size;
    height: @size;
}

.arr-dir(h, @bw) {
    border-top: @bw solid transparent;
    border-bottom: @bw solid transparent;
}
.arr-dir(v, @bw) {
    border-left: @bw solid transparent;
    border-right: @bw solid transparent;
}

#arrow {
    .right(@border-color: green,@border-width: 8px) {
        .square(0);
        .arr-dir(h, @border-width);
        border-left: @border-width solid @border-color;
    }

    .left(@border-color: green,@border-width: 8px) {
        .square(0);
        .arr-dir(h, @border-width);
        border-right: @border-width solid @border-color;
    }

    .up(@border-color: green,@border-width: 8px) {
        .square(0);
        .arr-dir(v, @border-width);
        border-bottom: @border-width solid @border-color;
    }

    .down(@border-color: green,@border-width: 8px) {
        .square(0);
        .arr-dir(v, @border-width);
        border-top: @border-width solid @border-color;
    }
}

// Usage
.foo {
   #arrow > .down(red,  12px);
}

.bar {
    #arrow > .up();
}