Search code examples
cssoverlayz-indexcropcurve

Is it possible to crop the bottom of an element with a subtle curve?

I want to be able to cut off the bottom of a large div (about 2000px) with a curve about 60px deep. Currently I have implemented this by placing a transparent image over the top which cuts it off. The only problem is that some elements on the main div are inaccessible because they are behind the curve overlay.

I really doubt this is possible, even in CSS3, but if anyone has any ideas please share.

Also, if there is a way I can arrange the current setup to allow elements in the main div which are behind the curve to be clicked then that would be just as good.

Solution

  • You could apply a border radius to the very bottom...

    -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.

    Experiment with the radius' value to get the desired effect.

    Alternatively, you could prevent the element being used currently from blocking the pointer with...

    pointer-events: none;