Is it possible to create a shadow that follows the shape of the clip polygon?

Question

Say I have this clip path (created by a triangle 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 shadow boxes from this clip path? Something like that:

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

Answer 1

I assume that you mean whether it is possible to create a shadow along a polygon. If yes, then no. box-shadowUnfortunately, it is only a “box”, so it cannot follow the clip. It will continue to apply to the rectangle of the element itself.

However, you could associate it with another element that has the same clipping but sets below it and offsets and creates 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>

Run codeHide result

, , / , , .

Answer 2

div, :

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

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

Answer 3

This is not possible, I think. I offer you this job.

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

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

Run codeHide result