如何在css / html中只填充unicode（star：\ u2605）字符的一半？

Question

如何使用星形unicode \u2605之类的东西，它是html / css中的一颗星，并且只填充一半而不是填充。

这是代码：

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

到目前为止，我的风格看起来像这样：

.starHalfFill {
  color: orange;
}

Answer 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内的文本为目标，并使填充颜色透明，从而使效果起作用。