CSS Curved Background

Question

我已经浏览了一下，找不到任何有解决方案的人：

问题：我的客户希望在页面上的某些div上有弯曲的底边。有些背景会有一张照片，有些背景会有一些微妙的图案（使用.PNG图像很困难，就像我在这里做的那样：www.bootbro.com

到目前为止，我有这个：

链接：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>

正如您所看到的，半径会根据div的高度而变化 - 这是我无法控制的，因为这会受到包含内容的影响。当它们到达两侧时，边界变得更薄。

有没有人有这方面的潜在解决方案？

谢谢

Answer 1

Border-radius可以使用一些静态值，例如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/