如何创建具有相反弯曲底部的 div答案

【问题标题】：How can I create div with an opposite-curved bottom如何创建具有相反弯曲底部的 div
【发布时间】：2016-09-26 21:10:30
【问题描述】：

于是我发现了这个问题：Can I create a div with a Curved bottom?

多亏了它，我设法使用以下代码制作了图像的弯曲底部：

    border-radius: 0 0 50% 50% / 15%;
    overflow: hidden;

看起来like that：

（实际上）。一切都会很好，但是......我需要曲线是totally opposite way：

如何使用干净的 CSS 做到这一点？

【问题讨论】：

标签： css wordpress image curve

【解决方案1】：

试试这个：

div {
  height: 250px;
  width: 300px;
  background: tomato;
  position: relative;
  margin:0 auto;
}
div:after {
  content: "";
  height: 50%;
  width: 100%;
  position: absolute;
  background: white;
  border-radius: 50%;
  bottom: -25%;
  transition: all 0.8s;
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

好的，很好！这就是我需要的；）这是我最后使用的代码：div#headerwrap { overflow: hidden; } div#headerwrap:after { content: ""; height: 30%; width: 100%; position: absolute; background: white; border-radius: 50% 50% 0 0 / 15%; bottom: -25%; }

【解决方案2】：

你不能只用一个 div 来做到这一点。边界半径不是那样工作的。但是，您可以使用多个元素来实现类似的效果。将第二个 div 覆盖在第一个 div 上，顶部带有弯曲的顶部，遮盖上 div 的一部分。如果您愿意，请将其全部包含在一个带有溢出的容器中：隐藏；遮盖覆盖 div 的底部。

<div class="container">
    <div class="curved">
    </div>
    <div class="curved-overlay">
    </div>
</div>

<style>
.curved-overlay{
    border-radius: 50% 50% 0 0 / 15%;
    background-color: white;
    width: 100px;
    height: 100px;
    margin-top: -15%;
}

.curved{
    background-color: blue;
    width: 100px;
    height: 100px;
}

.container{
    width: 100px;
    height: 100px;
    overflow: hidden;
}
</style>

这是代码笔：http://codepen.io/anon/pen/JKjNPa

【讨论】：