我需要在CSS中创建评级明星,到目前为止,我有两个要求,
到目前为止,我已经能够使用CSS创建全彩的星星。但是采用这种结构,我无法达到上述要求。
这就是我现在所拥有的,我遵循了ANSWER作为参考
.star {
position: relative;
display: inline-block;
width: 0;
height: 0;
margin-left: .9em;
margin-right: .9em;
margin-bottom: 1.2em;
border-right: .3em solid transparent;
border-bottom: .7em solid #FC0;
border-left: .3em solid transparent;
/* Controlls the size of the stars. */
font-size: 24px;
}
.star:before,
.star:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
top: .6em;
left: -1em;
border-right: 1em solid transparent;
border-bottom: .7em solid #FC0;
border-left: 1em solid transparent;
transform: rotate(-35deg);
}
.star:after {
transform: rotate(35deg);
}
<p>
<i class="star"></i>
<i class="star half"></i>
<i class="star transparent"></i>
</p>
答案 0 :(得分:3)
根据您的要求,我将使用SVG。这就是我的方法:
.star{border:1px solid #d9d9d9; width:30px;}
.star{fill:gold; stroke:orange; stroke-width:5px;}
.star.full use:nth-child(2){display:none;}
.star.half use:nth-child(1),
.star.empty use:nth-child(2)
{display:none;}
.star.empty{fill:none;}
<svg viewBox="0 0 95.1 90.45" style="width:0; height:0; display:none">
<defs>
<polygon id="half_star" points="47.6, 75 18.21, 90.45 23.82, 57.72 0.047, 34.55 32.9, 29.77 47.6, 0"></polygon>
<polygon id="star" points="47.6, 0 62.29, 29.77 95.15, 34.55 71.38, 57.73 76.99, 90.458 47.6, 75 18.21, 90.45 23.82, 57.73 0.05, 34.55 32.9, 29.77"></polygon>
</defs>
</svg>
<svg viewBox="0 0 95.1 90.45" class="star full">
<use xlink:href="#star" />
<use xlink:href="#half_star" />
</svg>
<svg viewBox="0 0 95.1 90.45" class="star half">
<use xlink:href="#star" />
<use xlink:href="#half_star" />
</svg>
<svg viewBox="0 0 95.1 90.45" class="star empty">
<use xlink:href="#star" />
<use xlink:href="#half_star" />
</svg>