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
Demo: codepen.io/ZoranJambor/pen/vY...
Clip-Path on MDN: developer.mozilla.org/en-US/d...
Clip-Path Converter: yoksel.github.io/relative-cli...
📖 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: / cssweekly
👉 Instagram: / cssweekly
👉 Facebook: / cssweekly
Keep up to date with what I'm up to:
🔗 Blog: zoranjambor.com
👉 Twitter: / zoranjambor
👉 LinkedIn: / zoranjambor
- Zoran Jambor
#css #frontend

Наука