怎么用css写一个底部弧度的效果

Question

如图示，底部的弧度效果除了用背景图外，还有其他什么方法吗，用border-radius写了下效果不佳

Answer 1

<style type="text/css">
.box {
  position: relative;
  width: 100%;
  height: 200px;
  text-align: center;
  color: #fff;
  background-color: #27ae60;
}
.box:after {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -100px;
  z-index: -1;
  content: ' ';
  height: 200px;
  width: 100%;
  border-radius: 0 0 50% 50%;
  background-color: #27ae60;
}
</style>
<div class='box'>hello world</div>

Answer 2

做个大尺寸的圆形div，根据弧的宽高计算出圆直径，圆心位置和div的位置，隐藏多余的部分。定位好后作为背景，覆盖个填充内容的透明层。

Answer 3

canvas

Answer 4

用border-radius 是可以的,只要定义好div的中心位置以及直径。

Answer 5

既然上面都说border-radius，那我给个其他的思路，用SVG。

Answer 6

用一个长方形在用border-buttom-radius