在CSS中稍微弯曲的底部div

Question

如何在CSS的帮助下实现这种形状？

我尝试了以下两个链接，但它们没有产生确切的结果。

Curved border with stroke in pure CSS?

http://jsfiddle.net/ECHWb/

.banner-img{
  height: 661px;
  position: relative;
  border-bottom-left-radius: 40% 55px;
  border-bottom-right-radius: 40% 55px;
  overflow: hidden;
}

任何帮助将不胜感激。最终结果应与下图匹配。

Answer 1

您可以使用CSS clip-path来做到这一点！

例如，在实际div下方创建一个带有诸如clip-path: ellipse(50% 9% at 50% 50%);之类的剪切路径属性的“ spacer” div。这将从div创建一个椭圆路径。与原始div重叠在此div的上半部分，并且-tada-您的底部呈圆形。

尝试this tool对剪切路径进行一些尝试或查看MDN Page

Answer 2

您也可以为此使用SVG。这是一个例子，我前一段时间做过。不幸的是，它仅用于页脚，因此您无法以1：1的方式复制粘贴，但是它向您展示了如何完成此操作。

.footer-curve__wrapper {
  position: static;
  height: auto;
  margin-bottom: -5px;
}

/*
 just to demonstrate it in combination with another element
*/
footer {
  color: white;
  background-color: #3ca3a2;
}


/*remove margin-padding from elements in footer*/
footer p {
  margin: 0;
  padding: 0;
}

<div style="500px">
  Content
</div>
<div class="footer-curve__wrapper">
  <svg class="footer-curve__image" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1600 100"> <defs> <path id="SVGID_1_" d="M0 101.3l1600-1.3V0H0z"></path> </defs> <clipPath id="SVGID_2_"> <use xlink:href="#SVGID_1_" overflow="visible"></use> </clipPath> <path d="M0 53.6V100h1600V0h-2.9c-237.2 59.2-570.9 96-940.6 96C417.1 96 192.8 80.6 0 53.6" clip-path="url(#SVGID_2_)" fill="#38a3a2"></path> </svg>
</div>
<footer>
  <p> Footer text </p>
</footer>