I'm trying to create a semi-circle with CSS, which looks as below.
<div class="semi-circle"></div>
I have tried to create a semi-circle with one circle, and one rectangle where the rectangle hides the lower part of the circle.
I know this isn't the best way to do it. So I am looking for a better approach using a single div.
There is a similar question on creating a semi-circular ring. Unfortunately, that didn't help.
.semi-circle {
height: 50px;
/* width = 2 * height */
width: 100px;
/* border-radius top-left, top-right = height */
border-radius: 50px 50px 0 0;
background: #5d95c6;
}
Use same algo to create right, bottom or left semi-circle
or You can rotate the existing semi-circle as below
/* right semi-circle */
transform: rotate(90deg);
/* bottom semi-circle */
transform: rotate(180deg);
/* left semi-circle */
transform: rotate(270deg);
.semi-circle {
/* Scale the semi-circle by changing the height variable*/
--height:50px;
height: var(--height);
width: calc(2*var(--height));
border-radius: var(--height) var(--height) 0 0;
background: #5d95c6;
}<div class="semi-circle"></div>
