Css semicirlce shape for footer

Question

Hi I'm trying to make that shape using css:

(The circle its bigger than the screen, that's also a problem I think)

I have something similar using borders but it's not a perfect circle... Do you guys know any way to make it?

#footer {
  height: 500px;
  background-color: black;
}

#inner_circle {
  position: relative;
  content: '';
  background-color: white;
  height: 350px;
  width: 100%;
  -webkit-border-radius: 0px 0px 200px 200px;
}

#footer-stuff {
  position: relative;
}

<div id="footer">
  <div id="inner_circle">
  <div>
  <div id="footer-stuff">
  <div>
<div>

Can we see your code so far so we can help you debug, through a [Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example)? — chriskirknielsen, Apr 22 '20 at 17:16

score 0 · Answer 1 · answered Apr 22 '20 at 17:23

0

Like that?

body {
  background-color: black;
}

.shape {
  width: 10rem;
  height: 5rem;
  background-color: white;
  border-radius: 0rem 0rem 5rem 5rem / 0rem 0rem 4rem 4rem;
}

<div class="shape"></div>

answered Apr 22 '20 at 17:23

Nisharg Shah

16,638
10
62
73

Rainbow · Accepted Answer · 2020-04-22T18:05:06.953

0

You can use a radial-gradiant

div {
  width: 800px;
  height: 400px;
  background: radial-gradient(100% 200% at 50% 0, red 49%, black 51%);
}

<div></div>

edited Apr 22 '20 at 18:05

answered Apr 22 '20 at 17:36

Rainbow

6,772
3
11
28

That does the trick, the problem I have now its that its not smooth – CalistoQueets Apr 22 '20 at 17:55
@CalistoQueets What you mean it's not smooth ? – Rainbow Apr 22 '20 at 17:56
This https://imgur.com/8UstWsR – CalistoQueets Apr 22 '20 at 18:02
@CalistoQueets You can see i lowered the first color stop ever so slightly to have a smooth curve this is a known issue with gradients, you'll have to lower the first AND/OR increase the second one enough to look good in your example – Rainbow Apr 22 '20 at 18:03
Thanks, I putted the second one to 50.05% and its pretty smooth, Thanks for the help – CalistoQueets Apr 22 '20 at 18:11

Css semicirlce shape for footer

2 Answers2