如何创建 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

你不能只用一个 div。 Border-radius 不是那样工作的。但是，您可以使用多个元素实现类似的效果。用弯曲的顶部覆盖第二个 div，遮盖上层 div 的一部分。如果你愿意，可以将它们全部封装在一个带有 overflow: 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>

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

Answer 2

试试这个：

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;
}

<div></div>

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

How can I create div with an opposite-curved bottom

css

wordpress

curve

image