Uploaded September 2022 | Updated September 2026, 1 hour ago

---

Learn how to use CSS clip-path and Clip Path editor in Firefox DevTools to create beautiful, fluid section breaks, dividers, and separators.

🔗 Links
Demo: codepen.io/ZoranJambor/pen/vYjKoOw/d375ef391d10cc4f4219ae82419d27bc
Clip-Path on MDN: developer.mozilla.org/en-US/docs/Web/CSS/clip-path
Clip-Path Converter: yoksel.github.io/relative-clip-path

📖 Timestamps
00:00 Intro
00:30 How clip-path works
01:21 Creating a header separator using clip-path: ellipse()
01:46 How Clip Path Editor in Firefox DevTools works
05:06 Creating a slanted header separator using clip-path: polygon()
06:34 Creating interesting hero section shapes using clip-path polygon()
07:54 Creating fluid section separators using SVG with clip-path: url()
09:40 Using Clip-Path Converter to convert absolute clip-path to relative
11:38 Conclusion

Support CSS Weekly by buying my course:
🔥 Mastering Prettier & Stylelint: masteringlinting.com

Subscribe to CSS Weekly Newsletter:
💌 css-weekly.com

Keep up-to-date with CSS Weekly:
👉 Twitter: twitter.com/CSSWeekly
👉 Instagram: instagram.com/cssweekly
👉 Facebook: facebook.com/CSSWeekly

Keep up to date with what I'm up to:
🔗 Blog: zoranjambor.com
👉 Twitter: twitter.com/zoranjambor
👉 LinkedIn: linkedin.com/in/zoranjambor

- Zoran Jambor
#css #frontend