CSS 曲线背景答案

【问题标题】：CSS Curved BackgroundCSS 曲线背景
【发布时间】：2016-08-31 10:28:18
【问题描述】：

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

问题：我的一个客户希望他们页面上的某些 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 的高度而变化——这是我无法控制的，因为这会受到包含内容的影响。当它们到达两侧时，边框也会变得更薄。

有人对此有任何潜在的解决方案吗？

谢谢

【问题讨论】：

div 的半径应该是多少？应该是椭圆还是圆形？
border-adius 值可以是像素jsfiddle.net/dg44thbr/2（或任何其他单位）
不确定，椭圆？ - 如果您访问bootbro.com - 看看弯曲元素是如何在这里工作的？（由 PNG 授予）但这是我们正在寻找的曲线。希望这是有道理的？
@GCyrillus 一种解决方案，但边界变细并失去其日食曲线。
为了避免边框失去厚度的部分，您也可以在两个 sdes jsfiddle.net/dg44thbr/7 上使用负边距或添加阴影 jsfiddle.net/dg44thbr/8（其中 15px 的值是用于绘制的值曲线）

标签： html css curve

【解决方案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/

【讨论】：