Some useful mixins for shapes and position

mixins.less

// shapes

.triangle() {
  content: "";
  display: inline-block;
  border-style: solid;
  border-color: transparent;
  width: 0;
  height: 0;
}
.triangle-bottom(@height; @color; @ratio: 1) {
  .triangle();
  border-top-color: @color;
  border-width: @height (@height / @ratio);
}
.triangle-left(@height; @color; @ratio: 1) {
  .triangle();
  border-right-color: @color;
  border-width: (@height / @ratio) @height;
}
.triangle-top(@height; @color; @ratio: 1) {
  .triangle-bottom(@height; @color; @ratio);
  border-top-color: transparent;
  border-bottom-color: @color;
}
.triangle-right(@height; @color; @ratio: 1) {
  .triangle-left(@height; @color; @ratio);
  border-right-color: transparent;
  border-left-color: @color;
}

.circle(@diameter) {
  content: "";
  display: inline-block;
  width: @diameter;
  height: @diameter;
  border-radius: 50%;
}

// position 

.center-center() {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.center-top() {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
}
.center-bottom() {
  .center-top();
  top: auto;
  bottom: 0;
}
.left-center() {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}
.right-center() {
  .left-center();
  left: auto;
  right: 0;
}