Creative Section Breaks Using CSS Clip-Path
Learn how to use CSS clip-path and Clip Path editor in Firefox DevTools.
Learn how to use CSS clip-path and Clip Path editor in Firefox DevTools to create beautiful, fluid section breaks, dividers, and separators.
Mastering Prettier & Stylelint
Chapters
- 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
