<span class="a">A</span>

@import "lesshat";

@light: #389ea8;
@dark: #0e1d29;
@size: 100px;
@centre-scale: 0.9;

.triangle-up(@width, @height, @colour) {
  content: " ";
  border-left: (@width/2) solid transparent;
  border-right: (@width/2) solid transparent;
  border-bottom: @height solid @colour;
  display: block;
  height: 0;
  width: 0;
}

.abs-centre() {
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

body {
  background: @dark;
  color: @light;
}

.a {
  .abs-centre();
  font: 0/0 a;
  width: @size;
  height: @size;
  transition: all 1s;
  
  &:before {
    .triangle-up(@size, @size*0.8, @light);
    position: absolute;
    top: 0;
  }
  &:after {
    .triangle-up(@size*@centre-scale, @size*0.8*@centre-scale, @dark);
    position: absolute;
    left: (@size - (@size*@centre-scale))*0.5;
    top: (@size - (@size*@centre-scale))*0.5;
  }
  
  &:hover {
    transform: rotate3d(1, 2.0, 3.0, 180deg)
  }
}