Jump to content

Recommended Posts

I am using this on some Divs to create a curved bottom to it.

    clip-path: ellipse(100% 60% at 50% 40%)

Trouble is, I don't see how I can get a shadow under it, because the shadow still want to go from the 'very' bottom of the container.

How in CSS can I get this curved effect, and the shadow beneath it?

Link to comment
https://forums.phpfreaks.com/topic/322896-how-do-you-get-shadow-under-clip-path/
Share on other sites

Unless someone has a better idea, I just found the solution.  You apply the Filter Drop Shadow to the Curved Bottom's outer containing Div:

 .container{
      filter: drop-shadow(0px 10px 5px rgba(0,0,0,0.5));
 }

 .shape{
      clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
      background:red;
      width:100px;
      height:100px;
      transform: rotate(75deg);      
 }

Tho it only works with Filter: Drop Shadow, which doesn't appear to let me narrow the width, but move it down, which you can with box-shadow... ideas?

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.