CODEWITHSUNDEEP
htmlcss
devanshi
devanshi

Reputation: 141

How can i set sharp half circle background in css

enter image description hereI 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>

Upvotes: 0

Views: 1559

Answers (5)

LDS
LDS

Reputation: 362

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

Upvotes: 0

Praneet Dixit
Praneet Dixit

Reputation: 1425

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.

Upvotes: 0

Umesh
Umesh

Reputation: 529

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>

Upvotes: 1

LDS
LDS

Reputation: 362

.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

Upvotes: 0

itsanewabstract
itsanewabstract

Reputation: 1036

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>

Upvotes: 0

Related Questions