Is it possible to generate a box-shadow that follows the shape of a clip-path polygon?

Question

Let's say I have this clip path (a triangle generated here)

-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%); clip-path: polygon(50% 0%, 0% 100%, 100% 100%); 

Is it possible to create a box-shadow from this clip path? Something like this:

box-shadow: 20px 25px 50px -25px #000; 

Answer 1

You can use a filter on the containing div, try:

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

eg: https://plnkr.co/edit/kePuv7OLQwawPjiBLg3J?p=preview

Answer 2

I'm assuming you mean, is it possible to create the shadow along the polygon. If so, then no. box-shadow is unfortunately only a "box", so it can't follow the clip path. It'd still apply to the rectangle of the element itself.

You could however pair it with another element that has the same clipping, but is set below it and offset and create a pseudo-shadow:

#box {    position: relative;    width: 200px;    height: 200px;  }    #content {    width: 100%;    height: 100%;    background: #3CF;    -webkit-clip-path: polygon(0 100%, 0 0, 100% 0, 80% 100%);  }    #shadow {    position: absolute;    z-index: -1;    content: "";    background: rgba(0, 0, 0, .5);    width: 200px;    height: 200px;    left: 5px;    top: 5px;    -webkit-clip-path: polygon(0 100%, 0 0, 100% 0, 80% 100%);  }

<div id="box">    <div id="content"></div>    <div id="shadow"></div>  </div>

Depending on your use-case, with some clever use of a background image, multiple borders, and/or gradients, you could make the background look between with a fading shadow and what not.