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

Question

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

由于这个原因，我设法使用下面的代码制作图像的弯曲底部：

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

看起来like that：

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

我怎样才能用干净的CSS做到这一点？

Answer 1

试试这个：

＆＃13;

＆＃13;

<div></div>

＆＃13;

Collect JavaScript CPU Profile

＆＃13;

＆＃13;

＆＃13;

Answer 2

你不能只用一个div来做。边界半径不起作用。但是，您可以使用多个元素实现类似的功能。在第一个上面叠加第二个div，带有弧形顶部，遮盖上部div的一部分。如果你愿意，把它全部放在一个带溢出的容器中：hidden;隐藏叠加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>

以下是codepen：http://codepen.io/anon/pen/JKjNPa