How to display half of a character(html entity) using css (and if required jquery)

css, html, javascript, jquery

Solution

Well, the easiest method would be to just use the the Unicode 'RIGHT HALF BLACK CIRCLE' character, HTML entity `◗`.

◗

See Wikipedia: Geometric Shapes

Update: For a more general solution, you could use something like this:

<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

Problem

I am using the html entity (code) & #9679; which is a dark filled circle(●). I want to display the first or the second half of the image(filled semi circle). I could use image of a filled half circle to achieve this but I want to use html entity since that reduces page load time

Original source