<div class="container">
  <a href="#" class="box box_one"></a>
  <a href="#" class="box box_two"></a>
  <a href="#" class="box box_three"></a>
</div>

<!-- Resources:
https://css-tricks.com/snippets/css/css-triangle/ -->

body {
  background: -webkit-linear-gradient(to right, #0099F7 , #F11712);
  background: linear-gradient(to right, #0099F7 , #F11712);
}

.container {
  max-width:900px;
  width:100%;
  height:300px;
  margin:0px auto;
  height:100%;
  min-height:400px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.box {
  width:0;
  height:0;
  transition:all 1s ease; 
  &:hover {
    transform: rotate(360deg);
  }
}

.box_one {
  border-top:300px solid salmon;
  border-right:200px solid transparent;
  &:hover {
    border-top:400px solid aquamarine;
    border-right:300px solid transparent;
  }
}

.box_two {
  border-top:150px solid transparent;
  border-bottom:150px solid transparent;
  border-left:150px solid mediumspringgreen;
  &:hover {
    border-top:250px solid transparent;
    border-bottom:250px solid transparent;
    border-left:250px solid deeppink;
  }
}

.box_three {
  border-bottom:300px solid darkturquoise;
  border-left:200px solid transparent;
  &:hover {
    border-bottom:400px solid crimson;
    border-left:300px solid transparent; 
  }
}