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%         


        

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

It's not possible, I think. I would suggest you this work around.

.triangle {
font-size:100px;
color:blue;
text-shadow:0 0 10px black;
}

<span class="triangle">▲</span>

Answer 3

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.