半星和体透明星答案

【问题标题】：Half Star and Body Transparent Star半星和体透明星
【发布时间】：2019-04-25 19:09:12
【问题描述】：

我需要在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>

【问题讨论】：

所以你说你所拥有的只是 100% 从链接的 SO 问题复制而来。您没有自己添加/更改任何内容。现在您希望我们让它满足您的要求。对吗？
@connexo 您可以比较一下代码先生。我遵循了模式。以及我研究了我的要求，但我找不到任何答案。我发现一些他们正在使用 unicodes 和 svg。但实际上我想在 css 中做到这一点。由于我在互联网上找不到任何答案，我发布了这个问题。如果你真的觉得这是一个无用的问题，你有足够的权力来结束这个问题。谢谢。
你可以通过应用一些剪辑或类似的东西来获得半星；但要获得星形边框，这种技术真的不适合恕我直言。
@misorude 谢谢您的回复先生。它可以用纯 css 做到这一点，还是我需要 svg 或其他东西的支持？

标签： html css svg css-shapes

【解决方案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>

【讨论】：

这是不错的方法，先生。谢谢您的回复。是否可以使用 css 做同样的事情？
我认为 SVG 是最好的解决方案，它实际上就像是 HTML 和 CSS。你可以尝试对 css clip-path 做同样的事情，尽管浏览器支持不是很好。另外我认为您可能需要使用阴影而不是笔触。这是使用剪辑路径的方式：div.half-star{ -webkit-clip-path: polygon(47.6% 75%, 18.21% 90.45%, 23.82% 57.72%, 0.047% 34.55%, 32.9% 29.77%, 47.6% 0%); } 和 div.star{ -webkit-clip-path: polygon(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%); }
好的，先生，这工作正常。感谢您的宝贵时间和宝贵的回答