How can I create a diagonal section in Webflow?

To create a diagonal section in Webflow, you can use CSS transformations within the Designer or apply a clip-path for more flexibility.

1. Use a Transform Skew on a Div Block

• Add a Section to your page and give it a class (e.g., Diagonal Section).
• Inside the section, add a Div Block that will hold your content (e.g., with class Content Wrapper).
• Select the Diagonal Section, then go to the Style Panel.
• Under Transform, click the “+” icon and choose Skew.
• Apply a skew along the Y-axis (e.g., 10°) to get a diagonal background effect.
• To correct the skewed content, go to the Content Wrapper, apply an opposite skew (e.g., -10° Y-axis) so text/images appear normal.

2. Use CSS Clip Path for More Control

• Select your Section, then go to the Style Panel.
• Scroll to Custom CSS (under the Settings Panel if using custom code).
• Apply a clip path using a polygon shape. For example:
• In the Embed element or Page Settings custom code, use:
  clip-path: polygon(0 0, 100% 10%, 100% 100%, 0% 90%);
• This creates a trapezoid shape with slanted top and bottom edges.
• If you want this to be responsive, use vw/vh units or adjust the points relative to screen size.

3. Add a Background Image or Overlay for Visual Effect

• You can also create the illusion of a diagonal by using a diagonal SVG shape, placed at the top or bottom of your section as a separate div or image.
• Use a position: absolute and set the Z-index so it overlays or underlays the section appropriately.
• Make sure both the section and the SVG container have the correct positioning settings (e.g., relative for the section and absolute for the SVG).

Summary

To make a diagonal section in Webflow, either apply a Y-axis skew transform to the section and reverse-skew the content, or use a CSS clip-path polygon for precise control. For more custom visuals, overlay an SVG shape with position controls.