FontAwesome条纹星星

Question

我正在尝试使用如下所示的超棒fa-star-o图标创建条纹星形。我使用background-gradient来创建此效果，但不仅仅是覆盖星形图标，它还覆盖了图标周围的整个正方形空间。字体超棒的图标可能无法实现我想实现的目标，因此也可以接受其他建议，但希望使用带有图标的答案。

<script src="https://use.fontawesome.com/eed659c9d4.js"></script>

<style>
  .fa-star-o {
    color: #cbb247;
    font-size: 24px;
    background: repeating-linear-gradient( -45deg, #e6c84b, #e6c84b 2px, #FFF 2px, #FFF 4px);
  }
  

</style>

<i class="fa fa-star-o"></i>

Answer 1

您可以使用background-clip: text;进行此操作。

.fa-star {
  font-size: 24px;
  position: relative;
}

.fa-star::before {
  background: repeating-linear-gradient( -45deg, #e6c84b, #e6c84b 2px, #FFF 2px, #FFF 4px);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
}

.fa-star::after {
  content: "\f006";
  position: absolute;
  top: 0;
  left: 0;
  color: #cbb247;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<i class="fa fa-star"></i>

Answer 2

首先，我将考虑使用em而不是px来使某些东西具有与font-size相同的缩放比例。然后，技巧是组合多个渐变以隐藏不需要的部分。

当然，与通用解决方案相比，这更是不好的破解，因为您需要付出很多努力才能正确计算渐变，并且您将没有透明度：

.fa-star-o {
  color: #cbb247;
  background:
  linear-gradient(#fff,#fff) right/14% 100% no-repeat,
  linear-gradient(#fff,#fff) left/14% 100% no-repeat,
  linear-gradient(#fff,#fff) top/100% 14% no-repeat,
  linear-gradient(#fff,#fff) top left/39% 35% no-repeat,
  linear-gradient(#fff,#fff) top right/43% 35% no-repeat,
  linear-gradient(#fff,#fff) bottom right/27% 48% no-repeat,
  linear-gradient(#fff,#fff) bottom left/27% 48% no-repeat,
  linear-gradient(to top left,#fff 50%,transparent 50%) bottom left/51% 24% no-repeat,
  linear-gradient(to top right,#fff 50%,transparent 50%) bottom right/51% 24% no-repeat,
  repeating-linear-gradient( -45deg, #e6c84b, #e6c84b 0.1em, #FFF 0.1em, #FFF 0.2em);
}

<script src="https://use.fontawesome.com/eed659c9d4.js"></script>

<i class="fa fa-star-o fa-5x" style="font-size:100px;"></i>

<i class="fa fa-star-o fa-5x"></i>
<i class="fa fa-star-o fa-3x"></i>

<i class="fa fa-star-o fa-2x"></i>