html - 半星和体透星

Question

我需要在 css 中创建评级星，到目前为止我有两个要求，

1. 半色星星。
2. 有边框但 Body 透明的星星。

到目前为止，我已经能够使用 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>

Answer 1

根据您的要求，我会使用 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>