Creative Section Breaks Using CSS Clip-Path

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

🔗 Links

📖 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:

Subscribe to CSS Weekly Newsletter:

Keep up-to-date with CSS Weekly:

Keep up to date with what I'm up to:

- Zoran Jambor
#css #frontend

[clevermissfox]

Ohh so good to know forefox has a clippath editor. Maybe it can help me figure oit why outting overflow hosden on my element is nixing its pseudo elements clipPath 😂 just disappears. So baffling.

[AmplifyYourIncome]

Oh, somebody used Firefox finally :D Excellent tutorial as always

[Reonaru]

A mindblowing experience Sir . . . Thanks a lot !!!

[themolitor]

What?! Oh man, this is blowing my mind 🔥

[tonyblack]

Thank you. Yours is the video that I needed.

[thedacian]

Hello.I have not understood why svg added with clip path behaves as it were visbility:hidden and ocuppied that empty space on page.Thanks!