如何根据图片中显示的百分比进行星级评分？
我试图根据得分或百分比创建星级评分。 我为内联星创建了codepen。 但是不明白如何处理图像中显示的星星。 星星不应该是内联的，它们应该形成一个三角形。 你能不能帮帮我吧
和我的codepen链接
/*---------- general ----------*/ body { background: #ff7070; color: #F3FCF0; font-family: sans-serif; text-align: center; } /*---------- star rating ----------*/ %flex-display { display: flex; } .star-rating { @extend %flex-display; align-items: center; font-size: 3em; justify-content: center; margin-top: 50px; } .back-stars { @extend %flex-display; color: #bb5252; position: relative; text-shadow: 4px 4px 10px #843a3a; } .front-stars { @extend %flex-display; color: #FFBC0B; overflow: hidden; position: absolute; text-shadow: 2px 2px 5px #d29b09; top: 0; }
提前致谢。
你错过了左边：.front-stars类中的0
有时浏览器使用left 0渲染绝对元素一段时间没有，所以我们应该总是提到至少两个的组合（从左上角的左下角）
谢谢
你可以试试这个：
/*---------- general ----------*/ body { background: #ff7070; color: #F3FCF0; font-family: sans-serif; text-align: center; } /*---------- star rating ----------*/ .star-rating, .back-stars, .front-stars { display: flex; } .star-rating { align-items: center; font-size: 3em; justify-content: center; margin-top: 50px; height:50px; position:relative; width: 145px; } .back-stars { color: #bb5252; position: absolute; right:0; left:0; top:0; bottom:0; text-shadow: 4px 4px 10px #843a3a; } .front-stars { color: #FFBC0B; position: absolute; left:0; top:0; overflow:hidden; bottom:0; text-shadow: 2px 2px 5px #d29b09; top: 0; }