How to make CSS separator half-circle?
<p>I have mockup like this <a href="https://i.stack.imgur.com/EQDTx.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EQDTx.jpg" alt="Half Circle"></a></p>

<p>And I'm trying to add this in my code</p>

<p><strong>HTML</strong></p>

<pre><code>&lt;section id="screens-three" class="clearfix"&gt;
    &lt;div class="container"&gt;
        &lt;div class="row"&gt;
            &lt;div class="col-md-12"&gt;
                &lt;h1 class="maintitle text-center"&gt;Test&lt;/h1&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/section&gt;

&lt;section id="screens-four" class="clearfix"&gt;
    &lt;div class="container"&gt;
        &lt;div class="row"&gt;
            &lt;div class="col-md-12"&gt;
                &lt;h2 class="maintitle"&gt;01Designs&lt;/h2&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/section&gt;
</code></pre>

<p>The problem? How to make a separator like an image above? </p>