Html 将边框半径添加到形状/图像

我想做到这一点。我不知道该怎么办，因为像border radius这样的工具无法实现这一点。顶部的曲线是图像，下面的曲线只是纯色。正如你所看到的，两边仍然很锋利。它可以有一个：之前或之后，但我不知道如何做它的形状

---

您必须为每个框添加一个帖子，然后为每个框更改margon

尝试像这样添加转换和包装块：

.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:

---

您将img上传到哪里以供参考？我刚刚编辑了它，请用小提琴或代码笔分享你的代码，这可能会有所帮助。发生了什么，你期望发生什么，你尝试了什么？请查看代码笔

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

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