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

Question

我正在使用html实体(代码)● 这是一个黑色的圆圈(●).
我想显示图像的第一个或第二个半部分(填充半圆).

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

Answer 1

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

◗

参见维基百科:几何形状

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

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

示范