javascript - 如何使用 css(如果需要 jquery)显示半个字符(html 实体)

Question

我正在使用 html 实体(代码)●这是一个黑色实心圆圈(●)。
我想显示图像的前半部分或后半部分(实心半圆)。

我可以使用填充的半圆的图像来实现这一点，但我想使用 html 实体，因为这样可以减少页面加载时间

Answer 1

嗯，最简单的方法是只使用 Unicode 'RIGHT HALF BLACK CIRCLE' 字符，HTML 实体 ◗。

◗

参见维基百科: Geometric Shapes

---

更新:对于更通用的解决方案，您可以使用如下内容:

<span class="clip">
    <span class="l-half">&#9673;</span>
</span>

.clip {
    overflow: hidden;
    display: inline-block;
}
.l-half {
    font-size: 72px;
    position: relative;
    left: -50%;
}

Demonstration