How to draw Semi circle with css-CodePudding

I'm trying to create a semi-circle with CSS, which looks as below.

<div ></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 on Stackoverflow. Unfortunately, that didn't help.

CodePudding user response：

Top Semi Circle

.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);

Live Codepen

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