将边界半径放在形状/图像上

Question

我想实现这一目标。 我不知道该怎么做，因为像 border-radius 这样无法实现这一点。 顶部的曲线是图像，下面的曲线只是纯色。 如您所见，两个边缘仍然很锋利。 它可以有 :before 或 :after 但我不知道如何在形状上做到这一点。

Answer 1

您必须为每个框添加一个位置，并为每个人更改边距。

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

网址：

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

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

https://jsfiddle.net/xbmbgLcc/