SOURCE

<div class="wrapper">
  
  <!-- <div class="star-five"></div> -->
  <div class="star-wrapper">
      <div class="star-five2 a"></div>
      <div class="star-five2 b"></div>
      <div class="star-five2 c"></div>
  </div>
  <div class="star-wrapper">
      <div class="star-five2 a"></div>
      <div class="star-five2 b"></div>
      <div class="star-five2 c"></div>
  </div>
  
</div>

.wrapper {
   display: flex;
}
.star-five{
  margin-right: 10px;
  &:after {
    width: 0;
    height: 0;
    display: block;
    position: absolute;
    // color: grey;
    top: 3px;
    left: -105px;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 70px solid blue;
    content: "";
    -webkit-transform:rotate(-70deg);
  }
}


.star-five:before{
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 80px solid grey;
position: absolute;
top: -45px;
left: -65px;
color: white;
display: block;
content: "";
-webkit-transform:rotate(-35deg);
}

.star-five{
  width: 0px;
  height: 0px;
  margin: 50px 0;
  position: relative;
  display: block;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 70px solid green;
  transform:rotate(35deg);
  
  &:hover {
    border-bottom-color: yellow;
    
    &:after {
      border-bottom-color: yellow;
    }
    &:before {
      border-bottom-color: yellow;
    }
    
  }
}


.star-wrapper {
  position:relative;
	margin-top: 150px;
  margin-left: 120px;
  
  &:hover {
    .star-five2 {
      border-top-color: yellow;
    }
  }
}
.star-five2 {
  width: 0px;
  height: 0px;
  background-color: transparent;
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  border-left: 170px solid transparent;
  border-right: 170px solid transparent;
  border-top: 100px solid grey;
  &.b {
    transform: rotate(74deg);
  }
  &.c {
    transform: rotate(-73deg);
  }
}