Let’s do a little step-by-step of a situation where you can’t quite do what seems to make sense, but you can still get it done with CSS trickery. In this case, it’ll be applying a shadow to a shape.
You make a box
.tag { background: #FB8C00; color: #222; font: bold 32px system-ui; padding: 2rem 3rem 2rem 4rem; }You fashion it into a nice tag shape
You use clip-path because it’s great for that.
.tag { /* ... */ clip-path: polygon(30px 0%, 100% 0%, 100% 100%, 30px 100%, 0 50%) }You want a shadow on it, so you…
Try to use box-shadow.
.tag { /* ... */ box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); }But it doesn’t work. Nothing shows up. You think you’re going crazy. You assume you have the syntax wrong. You don’t. The problem is that clip-path is cutting it off.
You can drop-shadow a parent element instead
There is a filter that does shadows as well: drop-shadow(). But you can’t use it directly on the element because the clip-path will cut it off as well. So you make a parent:
<span class="tag-wrap"> <span class="tag"> Tag </span> </span>You can’t use box-shadow on that parent either, because the parent is still a rectangle and the shadow will look wrong. But you can use filter, and the shadow will follow the shape.
See the Pen
Shadow on Shape by Chris Coyier (@chriscoyier)
on CodePen.
That’s all.
The post Using “box shadows” and clip-path together appeared first on CSS-Tricks.