是否可以用細微的曲線裁剪一個元素的底部？

Question

我希望能夠用60px左右的曲線切斷大div（大約2000px）的底部。目前我已經通過在透明的圖像上面放置了一個透明的圖像來實現這一點。唯一的問題是主div上的一些元素是不可訪問的，因爲它們在曲線覆蓋之後。

我真的懷疑這是可能的，即使在CSS3中，但如果有人有任何想法，請分享。另外，如果有一種方法，我可以安排當前的設置，以允許單擊主曲線中位於曲線後面的元素，那麼這將是一樣好的。

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;