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

Question

我试图根据得分或百分比创建星级评分。我为内联星创建了codepen。但是我不明白如何处理图像中显示的星星。星星不应该是内联的，它们应该形成一个三角形。 你能不能帮帮我吧

和我的codepen link

＆＃13;

＆＃13;

/*---------- 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;
}

＆＃13;

<script src="https://use.fontawesome.com/f4e64b7c17.js"></script>
<div class="star-rating">
    <div class="back-stars">
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>>
        
        <div class="front-stars" style="width: 70%">
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>

        </div>
    </div>
</div>    

＆＃13;

＆＃13;

＆＃13;

提前致谢。

Answer 1

你可以试试这个：

/*---------- 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;
}

<script src="https://use.fontawesome.com/f4e64b7c17.js"></script>
<div class="star-rating">
  <div class="back-stars">
    <i class="fa fa-star" aria-hidden="true"></i>
    <i class="fa fa-star" aria-hidden="true"></i>
    <i class="fa fa-star" aria-hidden="true"></i>
  </div>
  <div class="front-stars" style="width: 70%">
    <i class="fa fa-star" aria-hidden="true"></i>
    <i class="fa fa-star" aria-hidden="true"></i>
    <i class="fa fa-star" aria-hidden="true"></i>

  </div>
</div>

Answer 2

你错过了左边：.front-stars类

中的0

有时浏览器使用left 0渲染绝对元素有时候没有，所以我们应该总是提到至少两个的组合（从左上角开始）

谢谢