Home / Questions / 417572
Accepted
Virgilio La Rosa
Asked: 2021-12-30 20:01:46 +0800 CST 2021-12-30 20:01:46 +0800 CST

Semi-Circle with CSS [closed]

  • 772

I am trying to draw the following image with CSS, I have tried several ways with border-radius, without any success. Is there a simple way to implement it? enter image description here.

html

1 Answers

  1. Best Answer

    It's not the most elegant option and you have to manually calculate where to position the elements... But it's one that uses simple concepts, you can use a rectangle and a circle to create the same effect, like so:

    body {
  background-color: black;
}

#test {
  background-color: red;
  height: 50px;
  width: 200px;
  position: relative;
  overflow: hidden;
}

#test:after {
  content: "";
  background-color: white;
  border-radius: 50%;
  height: 800px;
  width: 800px;
  position: absolute;
  left: -300px;
  top: -770px;
}
    <div id='test' />

    • 1