如何在 css/html 中只填充一半的 unicode（星号：\u2605）字符？ [复制]答案

【问题标题】：How to color fill a unicode (star: \u2605) character only half way in css/html? [duplicate]如何在 css/html 中只填充一半的 unicode（星号：\u2605）字符？ [复制]
【发布时间】：2018-11-02 15:54:32
【问题描述】：

如何获取像星形 unicode \u2605 之类的东西，它是 html/css 中的星形，并且只填充一半而不是完整。

代码如下：

<div class="starHalfFill">
 \u2605
</div>

到目前为止，我的样式如下所示：

.starHalfFill {
  color: orange;
}

【问题讨论】：

标签： html css

【解决方案1】：

由于这是按颜色而不是背景颜色着色的，因此我们需要做更多的工作才能将其填充到一半。通常要填充一个 div 一半你会做这样的事情：

.starHalfFill {
  background: linear-gradient(to right, orange 50%, grey 50%);
}

但由于这是一种基于文本的颜色，我们必须以它为目标。

     .star.star--non-filled {
        background: linear-gradient(to right, orange 50%, grey 50%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

这些属性将定位 div 内的文本，并使填充颜色透明，从而使效果起作用。

【讨论】：

和stackoverflow.com/questions/23569441/…这个最受欢迎的问题完全一样？
@TaylorAustin 你能加个小提琴吗？这似乎不起作用。 jsfiddle.net/nph/3wvq7ew6/1
未来的问题寻求者；来自 MDN：-webkit-text-fill-color 此功能是非标准的，不在标准轨道上。不要在面向 Web 的生产站点上使用它：
我完全没有看到那是重复的。