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

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;

jsFiddle

尝试使用radius'值来获得所需的效果。

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

pointer-events: none;