网页字体一半上的CSS笔划[重复]

Question

CSS笔画允许勾勒字体轮廓。我只想勾勒一个字体的50%。

我已经看到了一些JavaSCript的变通方法，可以将css设置在半个字母上，但我想用css这样做。

我的目标是能够添加类到右星网页字体看起来像左全星。该图像是2个衍射图标，我想能够创建的“半”看与CSS笔画的网页字体图标的效果星。

这是一个codepen有一个没有笔画CSS效果的图标，一个有CSS笔画。我怎样才能在css中设置这样的笔画效果将创建一半图标“满”和另一半“空”？

.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;
}