Create CSS Semi-Circles
<p>I have a filled circle that contains a number like so:</p>

<p><a href="https://i.stack.imgur.com/mdqhf.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/mdqhf.jpg" alt="enter image description here"></a></p>

<p>How would I go about splitting this into two semi-circles, so that I can store two different numbers within it, like so:</p>

<p><a href="https://i.stack.imgur.com/pWsrJ.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/pWsrJ.jpg" alt="enter image description here"></a></p>

<p>My CSS is as follows:</p>

<pre><code>.oval {
    display: inline-block;
    width: 75px;
    height: 75px;
    border-radius: 50%;
    background: #000000;
    color: white;
    line-height: 75px;
    font-size: medium;
}
</code></pre>