5

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

enter image description here

    <span className={"star"}>
     ★
    </span>
Improve this question
4
  • You can't. You're going to need another dedicated icon for that.
    – Justin Taddei
    Commented Jan 14, 2021 at 4:33
  • If you dont have dedicated icon you can create one more div with star and fix the width as 50% and with position hover over the current one. This is not a good solution. Just find dedicated icon please.
    – Santosh
    Commented Jan 14, 2021 at 4:36
  • 1
    @Santosh good point. I suppose if you're that desperate you could go full-send with background-clip: text; and a gradient, but I digress... :)
    – Justin Taddei
    Commented Jan 14, 2021 at 4:40
  • 1
    Or check this codepen found it after google. codepen.io/FredGenkin/pen/eaXYGV
    – Nik
    Commented Jan 14, 2021 at 4:41

1 Answer 1

Reset to default
0 
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>
Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.