0

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

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.

Is it possible in CSS?

Thanks,

enter image description here

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;
}

1 Answer 1

2

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>

1
  • Thanks. Almost what I'm looking for1 :) Is there a way to have the end of the curve (on the left) more straight?
    – Greg
    Commented Dec 3, 2016 at 21:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.