Extend half stars styling

We need a way to cut the star to a certain width.
At the moment I use 3 different icons for full, half and empty stars.

Some possible implementations:
- cut single star at width [n]%
- render 2 separate star ratings on top of each other and cut the whole star rating at width [n]%
- here an idea of @ivanblazevic in a [codepen](https://github.com/BioPhoton/angular-star-rating/issues/79#issuecomment-379268548)
here a method with [CSS Paint API](https://vitaliy-bobrov.github.io/css-paint-demos/star-rating/)

Start by reviewing how the current full, half, and empty stars are styled and how a star rating's width is represented. Compare the proposed single-star and layered-rating approaches, then confirm that the finished styling supports an arbitrary percentage cut and preserves the existing rating states.

Written by the indexing model from the issue text.