css中略微弯曲的底部div [重复]答案

【问题标题】：Slightly curved bottom div in css [duplicate]css中略微弯曲的底部div [重复]
【发布时间】：2020-04-04 10:31:24
【问题描述】：

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

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

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

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

【问题讨论】：

尝试使用剪辑路径
这能回答你的问题吗？ Can I create a div with a Curved bottom?
@PEPEGA 他的代码实际上来自那里，因此它没有回答他的问题。
我推荐使用 SVG。
@PEPEGA 我试过了。它不起作用。我不想使用 SVG 或 :after 和 :before 元素

标签： html css

【解决方案1】：

您也可以为此使用 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>

【讨论】：

不，我不想使用 svg。
你的决定，但如果我可以问：为什么不呢？每个浏览器都支持它。创建 SVG 是最难的部分：D

【解决方案2】：

您可以使用 CSS clip-path！

例如，使用clip-path: ellipse(50% 9% at 50% 50%); 之类的剪辑路径属性在实际 div 下方创建一个“spacer”div。这将从 div 创建一个椭圆路径。将这个 div 的上半部分与你原来的重叠，然后 - tada - 你有一个圆形的底部。

尝试this tool 尝试一下剪辑路径或查看MDN Page

【讨论】：

它在某种程度上起作用了。问题是我在那个横幅中有一个图像，那个横幅看起来像弯曲的。您建议横幅图像的方式看起来并不弯曲。有什么想法吗？
@UmerFarooq 一个常见的解决方法可能是在“曲线”容器上使用相同的图像。不过，这需要一定的精度，以使其在所有设备上看起来都很流畅