CSS 弧形背景

Question

我环顾四周，找不到任何人对此有解决方案：

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

到目前为止我有这个：

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/

CSS 弧形背景

CSS Curved Background

html

css

curve