html - CSS中的 flex 背景图像

Question

我正在尝试实现类似下图(来自 state street 的曲线背景图像)的效果网站，但在 CSS 中。

感谢 stackoverflow 上其他用户的帖子，我已经能够使用 border-radius 创建一些类似的东西，请参阅 http://jsfiddle.net/dg44thbr/9/

问题是我的曲线……太 flex 了。我希望它像 State Street 那样更“笔直”。

在 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>