Set color for half of the star

user_14586445 0
Viewed 108

How can I set a color only for half of the star? Like the image below?

enter image description here

    <span className={"star"}>
     ★
    </span>
emotion styled-components reactjs css
1 Answers
body {
  font-size: 60px;
}


.half {
  display: inline-flex;
}

  .half > div:first-child {
  overflow: hidden;
  width: 27px;
  z-index: 1;
  color: #f97d00;
}   
  .half > div:last-child {
  position: relative;
  margin-left:-27px;
}
 <span class='half'><div>★</div><div>★</div>
user_149962410
Related