*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body {
    background: palevioletred;
    font-family: Arial, Helvetica, sans-serif;
}

#star-five {
    margin: 50px 0;
    position: relative;
    display: block;
    color: purple;
    width: 0px;
    height: 0px;
    border-right: 100px solid transparent;
    border-bottom: 70px solid purple;
    border-left: 100px solid transparent;
    transform: rotate(35deg);
    transition: all 0.5s ease-in-out;
  }
  #star-five:before {
    border-bottom: 80px solid purple;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    position: absolute;
    height: 0;
    width: 0;
    top: -45px;
    left: -65px;
    display: block;
    content: '';
    transform: rotate(-35deg);
  }
  #star-five:after {
    position: absolute;
    display: block;
    color: purple;
    top: 3px;
    left: -105px;
    width: 0px;
    height: 0px;
    border-right: 100px solid transparent;
    border-bottom: 70px solid purple;
    border-left: 100px solid transparent;
    transform: rotate(-70deg);
    content: '';
  }

  #star-five.change-me{
    background-color: blue transparent;
    /* left:300px; */
    /* translate: 300px; */
    transform: translateX(300px) scale(2.4) rotate(33deg) skewX(2deg);
  }
 
  #star-five.change-me:before{
    border-color: transparent transparent blue;
  }

  #star-five.change-me:after{
    border-color: transparent transparent blue;
  }

  /* .change-me{
    border-color: blue transparent !important;
} */