如何在CSS/HTML中用一半的颜色填充一个unicode（星号:\u2605)字符？[副本]

Question

下面是代码：

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