'Css clip-path only in padding-box

Well with the following image:

enter image description here

<!doctype html>
<html>
    <body>
        <style type="text/css">
        img{
        -webkit-filter: drop-shadow(0.5px 0.5px 0 blue)
                drop-shadow(-0.5px 0.5px 0 blue)
                drop-shadow(0.5px -0.5px 0 blue)
                drop-shadow(-0.5px -0.5px 0 blue);

        filter: drop-shadow(0.5px 0.5px 0 blue)
                drop-shadow(-0.5px 0.5px 0 blue)
                drop-shadow(0.5px -0.5px 0 blue)
                drop-shadow(-0.5px -0.5px 0 blue);
        }
        </style>
        <img src="https://i.stack.imgur.com/jzeFd.png" width="25px" height="25px" style="width:25px;height:25px;clip-path: polygon(-5px -5px,15px 0px,15px 30px,-5px 30px);" />
        <!--clip-path: padding-box polygon(0px 0px,15px 0px,15px 20px,0px 20px)-->
    </body>
</html>

how we can allow filter to fill the rest of the star?

I want this for vote purposes (example: mean value:5.2/10 --> 5 stars and 20% of 1 star).

I don't want a <svg> solution because i want to use the css code in pyqt5 python app.

htmlcssqtstylesheets


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions