Simple way to create Diagonal Section / by minimal custom code (Step by Step)

[Siton_Systems]

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:

Creating Non-Rectangular Headers | CSS-Tricks

[Siton_Systems]

Example 2: Vertical ZigZag

My idea Vertical ZigZag layout (Also very modern today):

More Steps but also really easy:

1. Create flex parent
   

   

2. Add 2 cols(divs) inside this flex-parent
   

3. Set .col-flex basis to 50%
   

   

4. Add some content for right-col and background-image for left-col
   

   

5. Change left-col display to relative
   

   

6. Drag inside left-col embed-html (Copy-paste the code)

<style>
  svg.trapezoidal-vertical {
    position: relative;
    bottom: 0;
    right: 0;
    width: 150px;
    height: 100%;
    /* set height to pixels if you want angle to change with screen width */
  }
</style> 
<svg class="trapezoidal-vertical" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" 
preserveAspectRatio="none"> <polygon fill="#cfb682" points="0,100 100,0 100,100"/> </svg>

Click OK. Result:

Now style the HTML element (position absolute + left: auto; top: 0; right: 0; bottom: 0;)

Done.

Options:
change color / change width

Result:

[Berlitz]

Thank you @Siton_Systems, very easy indeed to implement and quite handy!

[chdaniel]

Always wanted to search this, thank you for making me stumble upon it without searching for it!

[PiterDimitrov]

Thanks for sharing @Siton_Systems