Set color for half of the star

Question

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

    <span className={"star"}>
     ★
    </span>

You can't. You're going to need another dedicated icon for that. — Justin Taddei, Jan 14 '21 at 04: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, Jan 14 '21 at 04:36
@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, Jan 14 '21 at 04:40
Or check this codepen found it after google. https://codepen.io/FredGenkin/pen/eaXYGV — Nik, Jan 14 '21 at 04:41

score 0 · Answer 1 · answered Jan 14 '21 at 05:11

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>

Set color for half of the star

1 Answers1