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

[Siton_Systems (Ezra Siton)]

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 (Ezra Siton)]

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 (Mario Garcia de Leon)]

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!

[PeterDimitrov (Webflow Expert Partner)]

Thanks for sharing @Siton_Systems

[BBWorx (Benny)]

Hi there, great way - thanks.
Is there a possiblity to make the bottom triangel section the transparent with bg-picture?
Would be happy about any help.
Thanks a lot
Ben

https://preview.webflow.com/preview/m3l2nd?utm_medium=preview_link&utm_source=designer&utm_content=m3l2nd&preview=268583d91767833079192169e97d4b65&mode=preview

[maxshepcross (Max)]

Hi there, thanks for this! I keep getting a white border under the section. Do you know how I fix this?

[Peepoodo88 (Benjamin Bertrand)]

Hi Max,

i’ve got the same issue did you find a solution for this border ? Seems to appear only on medium screen !

Thanks

[alexdixon]

It works better if you slightly adjust the polygon shape into a ‘right trapezoid’ to allow for some additional padding at the base. This can then be positioned as required with ‘bottom’ and should solve the gapping issue.

Polygon shape:

Positioned with bottom:

<style>
svg.trapezoidal-horizintal{
  position: relative;
  bottom: -0.25vw;
  width: 100%;
  height: 7.5vw;
  /* set height to pixels if you want the 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="currentColor" points="0 95, 100 0, 100 100, 0 100, 0 95"/>
</svg>

Note: fill=“currentColor” will inherit the text colour.