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

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
image

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:

6 Likes

Example 2: Vertical ZigZag

My idea :slight_smile: 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
    image

  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;)
image

Done.

Options:
change color / change width

Result:

4 Likes

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

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

1 Like

Thanks for sharing @Siton_Systems :webflow_heart:

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

1 Like

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

1 Like

Hi Max,

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

Thanks