Menu
How do I draw a semicircle with CSS when the height and width are percentages?
.container{
width: 200px;
height: 200px;
background: blue;
display: flex;
}
.semiCircle{
position:relative;
height: 90%;
width: 45%;
border-radius: 90% 0 0 90%;
background: red;
margin:auto;
}<div class='container'>
<div class='semiCircle'></div>
</div>
806
You could use border-top-left-radius and border-top-right-radius properties to round the corners on the box according to the box's height (and added borders). Then add a border to top/right/left sides of the box to achieve the effect.
To create left-semi-circle, height should be double of width. top-left corner and bottom-left corner of border-radius should be 0. top-right corner and bottom-right corner of border-radius should equal to width.
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.
CSS Shapes It's possible to draw circles and arcs in CSS by simply creating a square <div> and setting border-radius to 50%. Each side of the border can take a different color or can be set to transparent . The background-color property sets the shape's fill, if any.
First, create a circle with border-radius: 100%;. Then, make half of it transparent with background: linear-gradient(90deg, red 50%, transparent 50%);.
.container {
width: 200px;
height: 200px;
background: blue;
display: flex;
}
.semiCircle {
height: 90%;
width: 45%;
border-radius: 100%;
margin: auto;
background: linear-gradient(90deg, red 50%, transparent 50%);
}<div class='container'>
<div class='semiCircle'></div>
</div>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
