Search code examples
htmlcsscss-shapes

How to draw Semi circle with css

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

enter image description here

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

Solution

  • 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 class="semi-circle"></div>