网络字体一半的CSS笔画

Question

CSS stroke允许轮廓字体。我只想概述字体的50％。

我已经看到了一些使用JavaSCript的变通方法，可以将CSS设置为半个字母，但是我想使用CSS来实现。

我的目标是能够将类添加到右星形Web字体中，使其看起来像左完整星形。该图像是2个不同的图标，我希望能够在该图标的网络字体上用CSS笔触效果在星星上创建“半”外观。

这是codepen，具有一个没有笔触CSS效果的图标，一个带有CSS笔触的图标。如何在CSS中进行设置，以便笔触效果将创建一半的图标“ full”和另一半的“ empty”？

.empty {
  -webkit-text-fill-color: white;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
}

Answer 1

我怀疑这在纯CSS中是否可行，但是如果您可以添加一些标签，那么将两个图标彼此叠加，并用overflow: hidden剪切一个图标就很容易做到。

HTML：

<span class="half-thumb">
    <span class="mdi mdi-thumb-up"></span>
    <span class="mdi mdi-thumb-up empty"></span>
</span>
CSS：

.half-thumb {
    position: relative;
}
.half-thumb :first-child {
    width: 50%;
    overflow: hidden;
    position: absolute;
}