如何在 css 中设置锐利的半圆背景

Question

I am trying to put half circle background but radius in bottom not completely coming in circle....

Here is my code i have tried

 .main { overflow: hidden; }.bg { width: 100%; height: 800px; border-bottom-left-radius: 100px; border-bottom-right-radius: 100px; background-color: lightgray; margin-top: -130px; }

 <div class="main"> <div class="bg"></div> </div>

Answer 1

Try this it's working in all devices

 .main{ overflow: hidden; }.bg { width:80vw; height:40vw; border-bottom-left-radius: 80vw; border-bottom-right-radius: 80vw; background-color: lightgray; }

 <div class="main"> <div class="bg"></div> </div>

Answer 2

You can use an svg to make things easier. There is the circle element which you can include that always draws perfect circles. Place it so that only the bottom half shows and you've got a half circle.

Example:

 svg { width: 98vw; height: 98vw; }

 <svg viewbox="0 0 100 100"> <circle cx="50" cy="0" r="50" fill="grey" /> </svg>

Answer 3

 .halfCircle{ height:45px; width:90px; border-radius: 90px 90px 0 0; background:green; } <div class="halfCircle"></div> the bellow link has all the shape https://paulund.co.uk/how-to-create-different-shapes-in-css

Answer 4

As per as you have told your requirements in your comment, I have this.

 .main { /*overflow: hidden;*/ }.bg { width: 400px; height: 500px; /*Have reduced the width and height just for the sake of simplicity. It's completely up to you */ border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; background-color: lightgray; margin-top: -130px; }

 <div class="main"> <div class="bg"></div> </div>

Hope this solves your query.

Answer 5

It is working and looking perfectly.But the width should be twice the height and the border-redious first two parameters equal to height and last parameters should be 0

 .halfCircle{ height:400px; width:800px; border-radius: 400px 400px 0 0; background:green; }