html - Font awesome percentage width stacked icon

I want to achieve the following effect with CSS:

This star icon is a font. I would like to define the width of the orange background by percents, so 50% should be the perfect half of the star.

For now, I did the following:

And:

.container
{
    font-size: 200px;
    height: 300px;
    position: relative;
    width: 100%;
}

.star

{
    display: inline-block;
    left: 0;
    position: absolute;
    top: 0;
}

.star-under
{
    color: #ddd;

}

.star-over
{
    color: #f80;
    overflow: hidden;
    width: 30%;
}

The problem is that I need to provide the width and height in order to use % of width. And if I skip the container's width and height, it displays nothing, because it contains absolutely positioned children.

This % value is calculated on server side, so I'd rather keep it inline, like this:

What is the most flexible way to do this? By most flexible I mean the one that doesn't make it necessary to provide any width nor height.

Answer

You can set the container to display:inline-block, and only set the top icon to position:absolute.

.container {
  font-size: 200px;
  position: relative;
  display: inline-block;
}
.star-under {
  color: #ddd;

  vertical-align: top;
}
.star-over {
  color: #f80;
  position: absolute;
  left: 0;
  top: 0;
  width: 70%;
  overflow: hidden;
}