Способ кривого (за пределами) элемента в 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%, а я «вырезать» края через 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>