<div class="demo">
  <a class="arr arr-up"></a>
  <a class="arr arr-down"></a>
  <a class="arr arr-prev"></a>
  <a class="arr arr-next"></a>
</div>

<footer>
  <a href="https://codepen.io/peet86/pen/pJexJq" target="_blank">Check border-based (transparent) version here</a> 
</footer>

.arr{
  background:#ff0000;
  display:block;
  float:left;
}

.arr-up{
  // .arrow(direction(deg), size, stroke width, bgcolor);
  .arrow(0,50px,2px,#fff);
}

.arr-down{
  .arrow(180,50px,2px,#fff);
}

.arr-prev{
  .arrow(90,50px,2px,#fff);
}

.arr-next{
  .arrow(270,50px,2px,#fff);
}



// LESS MIXIN:
.arrow(@direction,@size,@stroke,@bgcolor) {
  width: @size;
  height: @size;
  margin:@size/2;
  -webkit-transform: rotate((@direction + 45) * 1deg);
  -moz-transform: rotate((@direction + 45) * 1deg);
  transform: rotate((@direction + 45) * 1deg);
  -o-transform: rotate((@direction + 45) * 1deg);

  &:after {
    content: '';
    position: absolute;
    left: @stroke;
    top:  @stroke;
    width: @size;
    height: @size;  
    background: @bgcolor;
  }
}

.demo{ margin:100px auto; width:400px;}
footer{position:absolute; width:100%; bottom:20px; text-align:center; font-family:sans-serif;}
footer a{ color:#cc0000; font-size:13px;}