border-radiusを形状/画像に配置する

Question

これを実現したいと思います。ボーダー半径のようにこれを達成できないので、私は何をすべきか分かりません。上部の曲線は画像であり、下の曲線は単色である。あなたが見ることができるように、両エッジはまだ鋭いです。それは：前または後にすることができますが、私は形でそれを行う方法を知らない。

Answer 1

あなたはすべてのボックスのpostionを追加する必要があり、そう皆のため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：あなたが参照するIMGをアップロード

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

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

https://jsfiddle.net/xbmbgLcc/