CSS中的弯曲背景图片 [英] Curved background image in CSS

问题描述

我正在尝试从州街网站获得以下图片(弯曲的背景图片) ，但使用CSS.

I'm trying to achieve something like in the picture below (curved background image) from state street website, but in CSS.

由于来自其他用户的关于stackoverflow的帖子，我已经能够使用border-radius创建一些类似的东西，请参见

Thanks to posts from other users on stackoverflow, I've been able to create something a bit similar using border-radius, see http://jsfiddle.net/dg44thbr/9/

问题是我的曲线...太弯曲了.我希望它像州道上的街道一样直".

The issue is that my curve... is too curvy. I'd like it to be more "straight" like the state street one.

是否可以在CSS中使用?

Is it possible in 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;
}

推荐答案

好吧，您可以尝试以下方法:

Well, you can try this one on for size: 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>

这篇关于CSS中的弯曲背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！