Blazor问题，关于基于属性的宽度百分比

Question

我在Blazor网站上对我的评分系统的宽度有疑问。我希望星星根据电影的等级来确定。像这样：

现在，我不知道如何使用movie.Rating属性设置星星的宽度。我也希望它看起来像这样，但是意识到它不能那样工作。

div class="rating-upper" style="width:" @movie.Rating"%">

我的代码看起来像这样（我现在已经放置了90％，但显然要在那儿放我的评分）：

非常感谢您的帮助和首次发布，因为我找不到关于此的任何信息。 Blazor也是新手，并且通常可以进行编程。

Answer 1

我个人将使用CSS剪切路径，并且其结构与您目前所用的略有不同。

首先是我的CSS

    .rating {        
        --rating: 0;
        --percent: calc(var(--rating) * 20%);
        position: relative;
        display: inline;
    }
    .rating::after {        
        position: absolute;
        content:"⭐⭐⭐⭐⭐";
        clip-path: polygon(0 0, var(--percent) 0, var(--percent) 100%, 0 100%);
        background-color: transparent;
        /* Purely cosmetic to align these stars vertically */
        top: -0.2rem; 
    }
    .rating::before {
        position: absolute;
        left: calc(100%);
        content:"⭐⭐⭐⭐⭐";
        opacity: 0.2;
        /* Purely cosmetic to align these stars vertically */
        top: -0.2rem;
    }

还有一些剃刀样品

<label class="rating" style=@($"--rating: {Rating}")>Rating : </label>

说明

类“ rating”之前和之后都向内容中添加了一组星星，它们被定位为重叠，背景设置为低不透明度，前景使用剪贴路径“遮盖”星星到所需的宽度。

百分比宽度是根据CSS变量--rating计算得出的，该变量使用Razor语法应用于label。

您可以在此处查看演示：https://blazorfiddle.com/s/b6jpqbhe