如何使用图像背景从底部弯曲 div [英] How to curve the div from bottom with image background

问题描述

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

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

解决方案

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

.clip {显示:内联块；剪辑路径:圆(100% 在 50% -50%)；}

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

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

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?

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

解决方案

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%) 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！