Draw a half circle using CSS or SVG

Question

I am looking for a way to draw the bottom of this circle using CSS or SVG. I saw this answer , but it has a perfect semicircle, while I need an extra segment to make it a little less than half. This is probably not possible with pure CSS, but the SVG answer is getting complicated for me.

<svg class="pie"> <circle cx="115" cy="115" r="110"></circle> <path d="M115,115 L115,5 A110,110 1 0,1 225,115 z"></path> </svg> 

Answer 1

You can do this with CSS:

 .partial-circle { position: relative; height: 20px; width: 100px; overflow: hidden; } .partial-circle:before { content: ''; position: absolute; height: 100px; width: 100px; border-radius: 50%; bottom: 0; background: #D08707; } 

 <div class="partial-circle"></div> 

You can also use two parts:

 .partial-circle { position: relative; width: 100px; overflow: hidden; } .partial-circle:before { content: ''; position: absolute; height: 100px; width: 100px; border-radius: 50%; } .partial-circle.top { height: 80px; } .partial-circle.bottom { height: 20px; } .partial-circle.top:before { top: 0; background: #E19B21; } .partial-circle.bottom:before { bottom: 0; background: #D08707; } 

 <div class="partial-circle top"></div> <div class="partial-circle bottom"></div> 

Answer 2

Why not use two path elements with an arc command?

 <svg width="135" height="135"> <path d="M125,85 a60,60 0 1,0 -115,0" fill="#E79A16" /><!--Top Half--> <path d="M10,85 a60,60 0 0,0 115,0" fill="#D78500" /><!--Bottom Half--> </svg> 

---

You can easily separate them.

 <svg width="135" height="135"> <path d="M125,80 a60,60 0 1,0 -115,0" fill="#E79A16" /><!--Top Half--> </svg> <svg width="135" height="135"> <path d="M10,80 a60,60 0 0,0 115,0" fill="#D78500" /><!--Bottom Half--> </svg> <svg width="135" height="135"> <path d="M10,0 a60,60 0 0,0 115,0" fill="#D78500" /><!--Bottom Half--> </svg> 

---