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

Question

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

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

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

Answer 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;

js小提琴。

试验半径的值以获得所需的效果。

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

pointer-events: none;