Matanya
Matanya

Reputation: 6346

filling part of an image in CSS

I'd like to create a scale with stars\flowers\whatever that will enable me to graphically present a fraction, in case of average grade (say 4.35). Is there a way to partially fill an empty non-rectangular image using CSS? TIA, Matanya

Upvotes: 0

Views: 65

Answers (1)

Christofer Eliasson
Christofer Eliasson

Reputation: 33865

If you are okay with using a div instead of an img for the image, you could set the image as a background in the div element, and calculate the width of the div, depending on how much of the image you want to show.

The calculation would have to be done through JavaScript, or server-side and then added inline on the div element, though.

Upvotes: 2

Related Questions