CSS中的彎曲背景圖片

Question

我正在嘗試通過State Street網站實現下面的圖片（彎曲的背景圖片），但是使用CSS。

多虧其他用戶在stackoverflow上發表的文章，我才能夠使用border-radius創建一些類似的東西，請參閱http://jsfiddle.net/dg44thbr/9/

問題是我的曲線...太彎曲了。 我希望它更像州道上的“直”。

CSS可能嗎？

謝謝，

body {
  margin: 0;
  background: red;
}

div#back {
  position: relative;
  height: 200px;
  background-image: url(http://wearepeak.co.uk/wp-content/uploads/2016/02/testimonial.jpg);
  width: 100%;
  border-bottom-left-radius: 70% 60px;
  border-bottom-right-radius: 30% 10px;
}

Answer 1

好吧，您可以嘗試以下尺寸： http : //jsfiddle.net/dg44thbr/10/

 body { margin: 0; background: red; } div#back { position: relative; height: 100px; background-image: url(http://wearepeak.co.uk/wp-content/uploads/2016/02/testimonial.jpg); width: 100%; border-bottom-left-radius: 250% 160px; border-bottom-right-radius: 0; margin-left: -2em; padding-right: 2em; } 

 <div id="back"></div>