CSS3の要素をカーブ（外側）する方法

Question

要素をカーブさせてから、background-imageプロパティを追加しようとしています。 私はこの質問 - Is there a way to curve an element?を探していました。唯一の違いは、それが曲線の外側にあることです。です。

は、ここに例を示します

これは私がしようとしたものです。この結果でhttp://jsfiddle.net/KcmfC/1148/

問題は、それがあまりにも多くの曲面であるということです。私はこれのための解決策を見つけることができません。これについて

#test { 
 
    background: url('http://www.planwallpaper.com/static/images/i-should-buy-a-boat.jpg') repeat center center/cover; 
 
    border: 0px solid #000; 
 
    width: 100%; 
 
    min-height: 15em; 
 
    border-radius: 0 0 100% 100%; 
 
}

<div id="test"></div>

Answer 1

私がしたことは、私はwidth 140％延伸し、Iはoverflow: hidden介してエッジを "カット"、ビットトリッキーです。ここに私の完全な例です：

#test { 
 
    position: relative; 
 
    overflow: hidden; 
 
    min-height: 150px; 
 
} 
 
#test:before { 
 
    background: url('http://www.planwallpaper.com/static/images/i-should-buy-a-boat.jpg') repeat center center/1048px 319px; 
 
    border: 0px solid #000; 
 
    content: ""; 
 
    width: 140%; 
 
     height: 100%; 
 
    border-radius: 0 0 100% 100%; 
 
    position: absolute; 
 
    z-index: -1; 
 
    left: -20%; 
 
    right: -20%; 
 
}

<div id="test"> 
 
    <div> 
 
SOME TEXT SOME TEXT SOME 
 
    </div> 
 
</div>

Answer 2

reduice border radius pourentage

body{ 
 
    margin:0 
 
    } 
 

 
#test { 
 
    background: url('http://www.planwallpaper.com/static/images/i-should-buy-a-boat.jpg') repeat center center/cover; 
 
    border: 0px solid #000; 
 
    width: 100%; 
 
    min-height: 15em; 
 
    border-radius: 0 0 35% 35%; 
 
}

<div id="test"> 
 
</div>

Answer 3

何？

#test { 
 
    background: url('http://www.planwallpaper.com/static/images/i-should-buy-a-boat.jpg') repeat center center/cover; 
 
    border: 0px solid #000; 
 
    width: 100%; 
 
    min-height: 15em; 
 
    border-radius: 0 0 70% 70%/20%; 
 
}

<div id="test"></div>

Answer 4

あなたがこれはまだあまりにも多くの半径である擬似要素

div { 
 
    background: gray url(http://www.planwallpaper.com/static/images/i-should-buy-a-boat.jpg) no-repeat center bottom -25px/cover; 
 
    height: 180px; 
 
    position: relative;  
 
} 
 
div:after { 
 
    content: ''; 
 
    background: gray url(http://www.planwallpaper.com/static/images/i-should-buy-a-boat.jpg) no-repeat center bottom/cover; 
 
    border-radius: 50%; 
 
    width: 100%; 
 
    height: 50px; 
 
    top: calc(100% - 25px); 
 
    left:0; 
 
    position: absolute; 
 
}

<div></div>