Stumbled onto a CSS clip-path trick for complex shapes that saved me 40 lines of code

I was trying to build a jagged-edged banner for a hero section and kept messing with borders and pseudo-elements until I tried chaining two clip-path polygons together. Has anyone else found a specific combo of clip-path values that handles weird angles better than just masking?

2 comments

2 Comments

milam424d ago

Tried something similar with a jagged bottom border on a pricing card. Ended up using clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 95% 100%, 90% 85%, 85% 100% and so on) to get a repeating zigzag without extra elements. The trick was keeping the y values consistent on the peaks and valleys so it looked clean instead of random.

evand653d ago

Gotta disagree though, all those extra polygon points just add more that can break if the layout shifts even a little. Isn't a clean pseudo-element approach more bulletproof for responsive design?