如何使用css顯示一半的字符（html實體）（如果需要jquery）

Question

我正在使用html實體（代碼）&＃9679;這是一個黑色實心圓（●）。
我想顯示圖像的第一個或第二個半（填滿半圈）。

我可以用一個半滿圈的形象，實現這一點，但我想使用HTML實體，因爲這減少了頁面加載時間

Answer 1

好，最簡單的方法是隻使用Unicode的「RIGHT半黑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