本文介绍了如何根据图片中显示的百分比进行星级评分?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我试图根据得分或百分比创建星级评分。我为内联星创建了codepen。但是不明白如何处理图像中显示的星星。星星不应该是内联的,它们应该形成一个三角形。
请你帮帮我吧。
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.
和我的
/*---------- 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>
提前致谢。
推荐答案
你可以试试这个:
/*---------- 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>
这篇关于如何根据图片中显示的百分比进行星级评分?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!