将border-radius放入形状/图像

Question

我想实现这一目标。我不知道该怎么办，因为border-radius就像无法实现这一点。顶部的曲线是图像，下面的曲线只是一个纯色。如您所见，两个边缘仍然很清晰。它可以有一个：之前或之后，但我不知道如何做它的形状。

Answer 1

您必须为每个框添加一个位置，因此更改每个人的margon。

Answer 2

尝试添加转换和包装块，如下所示：

.wrap {
  overflow: hidden;
  width: 990px;
}

.box1 {
  width:990px;
  height:300px;
  margin:0 auto;
  background: url('https://s9.postimg.org/vq8kj53an/Selection_025.png');
  border-radius: 0 0 40% 40%;
  transform: scalex(1.3);
}

HTML：

<div class="wrap">
  <div class="box1"></div>
</div>

<div class="box2"></div>
<div class="box3"></div>

https://jsfiddle.net/xbmbgLcc/