What? Very modern today to create Diagonal Section.
Example:
How to.
1
Starting point: Regular section
2 - Add zigzag SVG
2.1.
Add embed html
2.2.
Copy-Paste this code (SVG)
<style>
svg.trapezoidal-horizintal{
position: relative;
bottom: -5px;
width: 100%;
height: 10vw;
/* set height to pixels if you want angle to change with screen width */
}
</style>
<svg class="trapezoidal-horizintal" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"
preserveAspectRatio="none">
<polygon fill="#2f375d" points="0,100 100,0 100,100"/>
</svg>
Result:
Option 1: Zigzag at the top
Add background image for the embed-html
change the color of the svg to your site BG color:
Option 2: Zigzag at the bottom
Cons: For zigzags with background images the idea is more complex (For bg-images you can use this trick as “mask”).
Pros:: Very easy to set/manage + copy-paste / change order
Idea reference: