triangle.less

.triangle {
    content: ' ';
    display: block;
    width: 0;
    height: 0;
    line-height: 0;
    font-size: 0;
    border-style: solid;
    border-color: transparent;
}

.triangle-top(@color, @width: 10px, @height: @width) {
    .triangle;
    border-width: @height (@width/2);
    border-top-color: @color;
}

.triangle-bottom(@color, @width: 10px, @height: @width) {
    .triangle;
    border-width: @height (@width/2);
    border-bottom-color: @color;
}

.triangle-left(@color, @width: 10px, @height: @width) {
    .triangle;
    border-width: (@height/2)  @width;
    border-left-color: @color;
}

.triangle-right(@color, @width: 10px, @height: @width) {
    .triangle;
    border-width: (@height/2)  @width;
    border-right-color: @color;
}