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;

jsFiddle。

半径の値を試して、目的の効果を取得してください。

または、現在使用されている要素がポインタをブロックしないようにすることもできます...

pointer-events: none;