Css半圆弧形的页脚 [复制] 。

嗨，我试图使该形状使用css。

Semi cercle为页脚部分

(圆圈它比屏幕大，这也是我认为的一个问题)

我也有类似的使用边框的东西，但是不是一个完美的圆…… 你们知道有什么方法可以让它？

#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>

解决方案：

你可以使用一个 径向梯度

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

<div></div>