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> <circle cx="115" cy="115" r="110"></circle> <path d="M115,115 L115,5 A110,110 1 0,1 225,115 z"></path>
</svg>

2

3 Answers

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>

---

1

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

2

Simpler way without using path

<svg version="1.1" width="64" height="64" xmlns=""> <clipPath> <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>

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy