Javascript 如何根据图片中显示的百分比进行星级评定？

我正在尝试根据分数或百分比创建星级。我已经为内联星创建了代码笔。但我不知道该如何处理图像中显示的星星。恒星不应该是直线的，它们应该形成一个三角形。 你能帮我一下吗

还有我的

/*------------概述----------*/
身体{
背景：#ff7070；
颜色：#F3FCF0；
字体系列：无衬线；
文本对齐：居中；
}
/*----------星级----------*/
%柔性显示器{
显示器：flex；
}
.星级{
@扩展%flex显示；
对齐项目：居中；
字号：3em；
证明内容：中心；
边缘顶部：50px；
}
.背星{
@扩展%flex显示；
颜色：#bb5252；
位置：相对位置；
文本阴影：4px40x10px#843a3a；
}
.明星{
@扩展%flex显示；
颜色：#FFBC0B；
溢出：隐藏；
位置：绝对位置；
文本阴影：2px2p5px#d29b09；
排名：0；
}

>

您在前面的星星类中缺少左：0

有时浏览器使用左0呈现绝对元素，有时不使用，所以我们应该至少提到两个元素的组合（从左到右上下）

---

谢谢

这是我的代码笔链接，请提供一个最小、完整和可验证的示例。请阅读此链接，不要提供任何图像或视频的外部链接，但我上传的图像我不知道为什么它没有显示，我已经提供了我的代码笔链接。我还能做什么？使用live代码片段将你的代码笔添加到你的问题中。这对每个愿意回答你问题的人都有帮助，谢谢你教我这一点。