How to color fill a unicode (star: \u2605) character only half way in css/html?

Question

How to take something like a star unicode \u2605 which is a star in html/css and only fill it half way instead of full.

Here is code:

<div class="starHalfFill">
 \u2605
</div>

My styles look like this thus far:

.starHalfFill {
  color: orange;
}

score 0 · Answer 1 · answered May 23 '18 at 15:22

0

Since this is colored by color and not background color we will have to do a little more work to get this filled halfway. Normally to fill a div half way you would do something like:

.starHalfFill {
  background: linear-gradient(to right, orange 50%, grey 50%);
}

but since this is a text based color we will have to target that.

     .star.star--non-filled {
        background: linear-gradient(to right, orange 50%, grey 50%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

Those properties will target the text inside the div and also make the fill color transparent allowing the effect to work.

answered May 23 '18 at 15:22

Taylor Austin

5,407
15
58
103

4

so exactly like this most popular question https://stackoverflow.com/questions/23569441/is-it-possible-to-apply-css-to-half-of-a-character ? – Temani Afif May 23 '18 at 15:27
@TaylorAustin Can you include a fiddle? This doesn't seem to work. https://jsfiddle.net/nph/3wvq7ew6/1/ – Nathan Hinchey May 23 '18 at 15:29
2

Future question seekers; from MDN: `-webkit-text-fill-color` **This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web:** – soulshined May 23 '18 at 15:31
I didn't see that at all ill duplicate. – Taylor Austin May 23 '18 at 15:33

How to color fill a unicode (star: \u2605) character only half way in css/html?

1 Answers1