Create Diagonal Layouts Like it’s 2020
Nils Binder covers the ways:
1. Use an SVG in the form of a triangle. This technique is nicely described by Erik Kennedy on CSS-Tricks.
2. Hide part of your section using
clip-path. Read Diagonal Containers in CSS by Sebastiano Guerriero or Sloped edges with consistent angle in CSS by Kilian Valkhof.3. Using CSS Transforms
I would normally be a #2 kinda guy — slice off the top and bottom a bit, make sure there is ample padding, and call it a day. But Nils almost has me convinced this fancy math is better.
Here’s a kinda dumb clip-path way:
CodePen Embed Fallback
And Nils incredibly fancy playground:
CodePen Embed Fallback
Direct Link to Article — Permalink
The post Create Diagonal Layouts Like it’s 2020 appeared first on CSS-Tricks.
