How do I draw a semicircle with CSS when the height and width are percentages?

Question

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

user_6095075 · Answer

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%);
}

user_14548512 · Answer

In CSS Code, I'm added Css like this:

height: 50%;
width: 100%;
background-color: red;
border-top-left-radius: 110px;
border-top-right-radius: 110px;
transform: rotate(-90deg);

Example:

.container{
  width: 200px;
  height: 200px;
  background: blue;
  display: flex;
}

.semiCircle{
    height: 50%;
  width: 100%;
    background-color: red;
    border-top-left-radius: 110px;
    border-top-right-radius: 110px;
    transform: rotate(-90deg);
    position:relative;
    margin:auto;
}

How do I draw a semicircle with CSS when the height and width are percentages?

2 Answers