CSS彎曲背景

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: 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/