如何使用图像背景从底部弯曲 div

Question

是否可以使用 HTML CSS 添加底部弯曲，这样我们就不必像这样裁剪图像？这样做的主要目的是让图像像那样自动弯曲，我试图添加边界半径，但它不起作用。有什么帮助吗？

我认为我们需要使用SVG？我不确定。

Answer 1

根据您的浏览器支持要求，您可以使用clip-path和circle。

.clip {
  display: inline-block;
  clip-path: circle(100% at 50% -50%);
}

<div class="clip">
  <img src="https://placehold.it/500x350" alt="">
</div>

circle(100% at 50% -50%)定义一个圆，其半径100%（容器的宽度）位于x = 50% y = -50%容器坐标系上的坐标点。调整这些参数以满足您的需求（取决于容器和图像的实际大小）。