Alternative for clip-path: inset() in Internet Explorer 8

Question

I am making an application with JSF and Primefaces, I am facing an issue in one of my html elements.

This is the code.

<div style='background-repeat: repeat-x;background- 
image:url("/ASQ/resources/img/xxx_grey.png");width:300px;height:75px;' > 
</div>

<div style='background-repeat: repeat-x;background- 
image:url("/ASQ/resources/img/xxx_green.png");margin- 
top:-75px;width:300px;height:75px; clip-path:inset(0px #{300 - 
((((pollData.generalSat * 100)/5) * 300)/100)}px 0px 0px);'></div>

#{300 - ((((pollData.generalSat * 100)/5) * 300)/100)} is a number I get from my bean and I use to clip the background.

As you can see, I use clip-path:inset() and my application must run with Internet Explorer 8, therefore, clip-path is not working, I have searched and haven't found anything about IE8, only about newer versions and all the info found tells to use SVG instead but this is not supported in IE8 either. Currently, it works perfectly with Chrome and Firefox.

So, is there any way to make this work with IE 8?

Answer 1

Thanks to @G-Cyr answer I came with a solution that works just fine.

I changed mi HTML to this:

<div class="sat-gen">
    <div class="sat-gen2"></div>
</div>

And I added this CSS to my XHTML.

.sat-gen{
    background-repeat: repeat-x;
    background-image:url("/ASQ/resources/img/xxx_grey.png");
    width:300px;
    height:75px;
}

.sat-gen > .sat-gen2{
    background-repeat: repeat-x;
    background-image:url("/ASQ/resources/img/xxx_green.png");
    width:300px;
    height:75px;
    position:absolute;
    clip: rect(0px #{((((datosEncuesta.valoracionSatisfaccionGeneral * 100)/5) * 300)/100)}px 75px 0px);
}

Since I am using a value from my backing bean I had to add all the CSS in a internal CSS sheet, so you have to keep this in mind in case you are using a value from a bean (inline style is also possible), if not, you can use the CSS in the best way you want.