是否可以用微妙的曲线裁剪元素的底部？

Posted 2023-02-25

【中文标题】是否可以用微妙的曲线裁剪元素的底部？

【英文标题】：Is it possible to crop the bottom of an element with a subtle curve?

【发布时间】：2012-08-30 05:15:17

【问题描述】：

我希望能够用大约 60px 深的曲线切掉一个大 div（大约 2000px）的底部。目前我已经通过在顶部放置一个透明图像来实现这一点，从而将其切断。唯一的问题是主 div 上的某些元素无法访问，因为它们位于曲线叠加层后面。

我真的怀疑这是否可能，即使在 CSS3 中也是如此，但如果有人有任何想法，请分享。

另外，如果有一种方法我可以安排当前设置以允许单击位于曲线后面的主 div 中的元素，那也一样好。

【参考方案1】：

您可以将边框半径应用于最底部...

-webkit-border-bottom-right-radius: 50px;
-webkit-border-bottom-left-radius: 50px;
-moz-border-radius-bottomright: 50px;
-moz-border-radius-bottomleft: 50px;
border-bottom-right-radius: 50px;
border-bottom-left-radius: 50px;

jsFiddle.

用半径值进行实验以获得所需的效果。

或者，您可以防止当前正在使用的元素用...阻塞指针

pointer-events: none;