Draw half circle with CSS or SVG

Question

I'm looking for a way to draw the bottom portion of this circle using CSS or SVG. I've seen this answer but it deals with a perfect half circle, whereas I need an extra segment cut off to make it a bit less than half. It's probably not possible with pure CSS but the SVG answer gets complicated for me to modify.

<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>

enter image description here

yes this works, can you please make full answer why this works? it seems that because of :after it takes on the parent's border-radius? I wasnt aware of this. — parliament, Dec 29 '14 at 03:28

Weafs.py · Answer 1 · 2014-12-29T06:02:25.553

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 separate them easily.

<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>

score 11 · Answer 2 · answered Apr 02 '20 at 21:52

Simpler way without using path

<svg version="1.1" width="64" height="64" xmlns="http://www.w3.org/2000/svg">
    <clipPath id="cut-off">
        <rect x="0" y="0" width="64" height="40"/>
    </clipPath>

    <circle cx="32" cy="32" r="32" fill="#d08807"/>
    <circle cx="32" cy="32" r="32" fill="#e19b22" clip-path="url(#cut-off)"/>
</svg>

score 8 · Accepted Answer · answered Dec 29 '14 at 03:28

You can do it 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 have the 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>

thank you for your response. this uses same concept as Cattla's answer but that one is far simpler. edit oh i see yours is for top and bottom — parliament, Dec 29 '14 at 03:30
@parliament I wanted to separate the top and the bottom parts. That may require a bit more code (which could be simplified more losing clarity), but depending on what you want it may be more flexible. — Oriol, Dec 29 '14 at 03:37

Draw half circle with CSS or SVG

3 Answers3

Linked