<div class="ratingControl">
  <input id="score100" class="ratingControl__radio" type="radio" name="rating" value="100" />
  <label for="score100" class="ratingControl__star" title="Five Stars"></label>
  <input id="score90" class="ratingControl__radio" type="radio" name="rating" value="90" />
  <label for="score90" class="ratingControl__star" title="Four & Half Stars"></label>
  <input id="score80" class="ratingControl__radio" type="radio" name="rating" value="80" />
  <label for="score80" class="ratingControl__star" title="Four Stars"></label>
  <input id="score70" class="ratingControl__radio" type="radio" name="rating" value="70" />
  <label for="score70" class="ratingControl__star" title="Three & Half Stars"></label>
  <input id="score60" class="ratingControl__radio" type="radio" name="rating" value="60" />
  <label for="score60" class="ratingControl__star" title="Three Stars"></label>
  <input id="score50" class="ratingControl__radio" type="radio" name="rating" value="50" />
  <label for="score50" class="ratingControl__star" title="Two & Half Stars"></label>
  <input id="score40" class="ratingControl__radio" type="radio" name="rating" value="40" />
  <label for="score40" class="ratingControl__star" title="Two Stars"></label>
  <input id="score30" class="ratingControl__radio" type="radio" name="rating" value="30" />
  <label for="score30" class="ratingControl__star" title="One & Half Star"></label>
  <input id="score20" class="ratingControl__radio" type="radio" name="rating" value="20" />
  <label for="score20" class="ratingControl__star" title="One Star"></label>
  <input id="score10" class="ratingControl__radio" type="radio" name="rating" value="10" />
  <label for="score10" class="ratingControl__star" title="Half Star"></label>
</div>

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #222;
}

// Exciting Part
// ====================
.ratingControl {
  position: relative;
  display: inline-flex;
  direction: rtl;

  &__radio {
    position: absolute;
    height: 0;
    width: 0;
    opacity: 0;
  }

  &__star {
    position: relative;
    display: block;
    height: 48px;
    width: 24px;
    cursor: pointer;
    overflow: hidden;

    &:nth-last-of-type(odd) {
      &::before,
      &::after {
        left: 0;
        clip-path: polygon(50% 0%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
      }
    }

    &:nth-last-of-type(even) {
      &::before,
      &::after {
        right: 0;
        clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%);
      }
    }

    &::before,
    &::after {
      content: "";
      position: absolute;
      top: 0;
      height: 100%;
    }

    &::before {
      width: 200%;
      background-color: #aaa;
    }

    &::after {
      background-color: #f2b600;
    }
  }

  &__star:hover::after,
  &__star:hover ~ .ratingControl__star::after,
  &__radio:checked ~ .ratingControl__star::after {
    width: 200%;
  }
}