arrows.html

<div class="arrow-container arrow-up arrow-up-1">
  <div class="arrow"></div>
</div>

<hr>

<div class="arrow-container arrow-down arrow-down-1">
  <div class="arrow"></div>
</div>

<hr>

<div class="arrow-container arrow-up arrow-up-2">
  <div class="arrow"></div>
  <div class="arrow"></div>
</div>

<hr>

<div class="arrow-container arrow-down arrow-down-2">
  <div class="arrow"></div>
  <div class="arrow"></div>
</div>

<hr>

<div class="arrow-container arrow-up arrow-up-3">
  <div class="arrow"></div>
  <div class="arrow"></div>
  <div class="arrow"></div>
</div>

<hr>

<div class="arrow-container arrow-down arrow-down-3">
  <div class="arrow"></div>
  <div class="arrow"></div>
  <div class="arrow"></div>
</div>

arrows.less

// _variables.less

@arrow-green: #7ab800;
@arrow-red: #c00; 

// mixins/_mixins-arrows.less

.arrow-base (@bottom) {
  height: 0;
  margin: 0 auto @bottom auto;
  width: 0;
}

.arrow (@dir, @width, @color: @arrow-green, @bottom: .3em) when (@dir = up) {
  .arrow-base(@bottom);
  border-bottom: @width solid @color;
  border-left: @width solid transparent;
  border-right: @width solid transparent;
}

.arrow (@dir, @width, @color: @arrow-red, @bottom: .3em) when (@dir = down) {
  .arrow-base(@bottom);
  border-left: @width solid transparent;
  border-right: @width solid transparent;
  border-top: @width solid @color;
}

// decorators/_arrows.less

.arrow-container {
  vertical-align: middle;
}

.arrow-up-1 {
  .arrow {
    .arrow(up, 2.5em); /* 30px */
  }
}

.arrow-down-1 {
  .arrow {
    .arrow(down, 2.5em); /* 30px */
  }
}

.arrow-up-2 {
  .arrow {
    .arrow(up, 1em); /* 10px */
  }
}

.arrow-down-2 {
  .arrow {
    .arrow(down, 1em); /* 10px */
  }
}

.arrow-up-3 {
  .arrow {
    .arrow(up, 0.7em); /* 7px */
  }
}

.arrow-down-3 {
  .arrow {
    .arrow(down, 0.7em); /* 7px */
  }
}