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

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%);
}

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.