CSS弯曲背景

Question

I've had a look around and cannot find anyone with a solution for this:

The issue: A client of mine is looking to have curved bottom sides to certain divs on their page. Some backgrounds will have a photo, some will have a subtle pattern (making the use of .PNG images difficult like I've done here: www.bootbro.com

So far I have this:

Link: http://jsfiddle.net/dg44thbr/1/

CSS:

body {
  margin: 0;
}

.alignCenter {
  text-align: center;
}

.padAll {
  padding: 25px;
}

div#banner {
  position: relative;
  background-image: url(http://wearepeak.co.uk/wp-content/uploads/2016/02/testimonial.jpg);
  width: 100%;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  z-index: 555;
  border-bottom:3px solid red;
}

div#content {
  position: relative;
  background-image: url(http://wearepeak.co.uk/wp-content/uploads/2016/05/ux-787980_1920-1750x750.jpg);
  width: 100%;
  margin-top: -175px;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  z-index: 444;
  border-bottom:3px solid red;
}

div#section {
  position: relative;
  background-image: url(http://wearepeak.co.uk/wp-content/uploads/2016/07/balloons-1750x500.jpg);
  width: 100%;
  margin-top: -175px;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  z-index: 333;
  border-bottom:3px solid red;
}

.left {
  float: left;
}

.right {
  float: right;
}

.clear::after {
  clear: both;
  content: "";
  display: table;
}

.container {
  max-width: 500px;
  margin: auto;
}

.curveContent {
  padding-top: 200px;
}

HTML:

<div id="banner" class="alignCenter padAll">Content here</div>
<div id="content" class="alignCenter padAll">
  <div class="curveContent">
    <p>Content here</p>
    <p>But on another line! Oh no!</p>
    <p>And another line?! What is this>!</p>
  </div>
</div>

<div id="section">
  <div class="container clear">
    <div class="curveContent">
      <div class="left col2">

        <p>Content here</p>
        <p>But on another line! Oh no!</p>
        <p>And another line?! What is this>!</p>
      </div>
      <div class="right col2">
        Right text
      </div>
    </div>
  </div>
</div>

As you can see, the radius changes depending on the height of the div - something out of my control as this will be affected by containing content. Also the borders become thinner when they get to the sides.

Does anyone have any potential solutions for this?

Thank you

Answer 1

Border-radius can take a few static values such as border-radius: 0 0 200px 200px /15px;

 body { margin: 0; } .alignCenter { text-align: center; } .padAll { padding: 25px; } div#banner { position: relative; background-image: url(http://wearepeak.co.uk/wp-content/uploads/2016/02/testimonial.jpg); width: 100%; border-radius: 0 0 200px 200px /15px; z-index: 555; border-bottom:3px solid red; } div#content { position: relative; background-image: url(http://wearepeak.co.uk/wp-content/uploads/2016/05/ux-787980_1920-1750x750.jpg); width: 100%; margin-top: -175px; border-radius: 0 0 200px 200px /15px; z-index: 444; border-bottom:3px solid red; } div#section { position: relative; background-image: url(http://wearepeak.co.uk/wp-content/uploads/2016/07/balloons-1750x500.jpg); width: 100%; margin-top: -175px; border-radius: 0 0 200px 200px /15px; z-index: 333; border-bottom:3px solid red; } .left { float: left; } .right { float: right; } .clear::after { clear: both; content: ""; display: table; } .container { max-width: 500px; margin: auto; } .curveContent { padding-top: 200px; } 

 <div id="banner" class="alignCenter padAll">Content here</div> <div id="content" class="alignCenter padAll"> <div class="curveContent"> <p>Content here</p> <p>But on another line! Oh no!</p> <p>And another line?! What is this>!</p> </div> </div> <div id="section"> <div class="container clear"> <div class="curveContent"> <div class="left col2"> <p>Content here</p> <p>But on another line! Oh no!</p> <p>And another line?! What is this>!</p> </div> <div class="right col2"> Right text </div> </div> </div> </div> 

http://jsfiddle.net/dg44thbr/3/