CSS only arrows in LESS

arrows.less

// HOW TO USE
//
// @direction: up;
// .class {
//    .arrow(@direction, #c00, 20px);
// }
//

.arrow(up, @color, @size) {
  width: 0;
  height: 0;
  border-left: @size solid transparent;
  border-right: @size solid transparent;
  border-bottom: @size solid @color;  
}

.arrow(down, @color, @size) {
  width: 0;
  height: 0;
  border-left: @size solid transparent;
  border-right: @size solid transparent;
  border-top: @size solid @color;
}

.arrow(right, @color, @size) {
  width: 0;
  height: 0;
  border-top: @size solid transparent;
  border-bottom: @size solid transparent;
  border-left: @size solid @color;
}

.arrow(left, @color, @size) {
  width: 0;
  height: 0;
  border-top: @size solid transparent;
  border-bottom: @size solid transparent;
  border-right: @size solid @color;
}