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

问题描述：

是否可以使用HTML CSS添加弯曲的底部，以便我们不希望像这样裁剪图像?这样做的主要目的是让图像像这样自动弯曲，我试图添加边框半径，但是它不起作用.有帮助吗?

Is it possible to add the bottom curved using HTML CSS so we don't ned to crop the image like this? The main purpose of this is to allow image curved automatically like that, I tried to add border-radius but it won't work. Any help?

我认为我们需要使用SVG?我不确定.

I think we need to use the SVG? I am not sure.

答

取决于您的浏览器支持要求，您可以使用clip-path和circle.

Depending on your browser support requirements you could use clip-path and 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%的点上.调整这些参数以满足您的需求(取决于容器和图像的实际大小).

circle(100% at 50% -50%) defines a circle whose radius is 100% (of container's width) positioned at the point of coordinates x = 50% y = -50% on the container's coordinate system. Adjust those parameters to fit your needs (depending on the real size of your container and image).

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

相关推荐