How to make star rating based on percentage shown in image?

Im trying to create star rating based on score or percentage. I have created codepen for inline stars. But don't understand how to do for stars shown in image. Stars should not be inline, they should formed a triangle. Will you please help me with that.

and my codepen link

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

Thanks in advance.

2 answers

  • answered 2017-10-11 10:40 Temani Afif

    You may try this :

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

  • answered 2017-10-11 10:49 Pushpender

    You are missing left:0 in .front-stars class

    Sometime browsers render absolute element using left 0 some time not, So we should always mention combination of two at least( from left right top bottom)

    Thanks