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

Question

我希望能够用大约 60 像素深的曲线切断大 div(大约 2000 像素)的底部。目前，我已经通过在顶部放置一个透明图像将其切断来实现这一点。唯一的问题是主 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;

jsFiddle .

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

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

pointer-events: none;