Menu
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>
592
<svg> with <circle> element is used to create the circles based on center point and a radius. We can aslo create a half circle in SVG using the radius value as a percentage. i.e from 0% to 100%.
This can be done purely on CSS making use of borders. Keep note that height has to be half of the width to give the half circle. border-top-left or right-radius is the thing that adds the curve. So adding that extra +10 to it makes up for the space the border(which is set to 10px) creates.
A Semi-Circle or a Half-Circle shape can be easily created using HTML and CSS. We will use the border-radius property to draw the desired output. HTML Code: In this section we will create a simple “div” element using the <div> tag.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
