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

Question

posted Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

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;

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-17T02:50:05+0000

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

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