Found a clever way to do wavy flags without clip-path at a coffee shop in Santa Fe

I was sitting at a coffee shop in Santa Fe last week and noticed their outdoor flag design had these perfect wave folds, so I pulled up the inspector on my phone to see how they coded it. Turns out they used multiple skewed divs with gradient overlays instead of the usual clip-path method, and it looked way smoother than what I've been making. Has anyone else tried this approach for fabric-like effects in pure CSS?

2 comments

2 Comments

john_hunt28d ago

Wait, you pulled up the inspector on your PHONE at a coffee shop to check their CSS? That's next level dedication, I honestly don't know if I've ever done that for a flag design.

vera_roberts8d ago

@john_hunt2 gotta admit I've done the same thing at restaurants before, but I used multiple scaled pseudo-elements with different skew angles instead of gradients and it worked great for a waving banner effect I was testing.