Rand-Radius auf die Form/das Bild setzen

Question

Ich möchte dies erreichen. Ich weiß nicht, was zu tun ist, da Border-Radius wie dies nicht erreichen kann. Die Kurve an der Spitze ist ein Bild und die Kurve unten ist nur eine feste Farbe. Wie Sie sehen können, sind beide Kanten immer noch scharf. Es kann sein: vor oder nach, aber ich weiß nicht, wie es in Form zu tun ist.

Answer 1

Sie haben eine Postion für jedes Feld hinzuzufügen und so die Margon für alle zu ändern.

Answer 2

Versuchen Hinzufügen Transformation und Wrapper-Blöcke wie folgt aus:

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