How can I create a diagonal section in Webflow?
TL;DR
- CSS Transform (Skew Method): Add a section, apply an X-axis skew transform (e.g.,
-10deg), and adjust padding for readability. - CSS Clip Path: Assign a class, use a
clip-path: polygon(...)in custom CSS, and modify values for the desired diagonal effect. - SVG Background: Create a diagonal SVG shape, upload it as a background image, and set it to
coverwith appropriate positioning. - Best Approach: Use CSS skew or clip-path for simple effects and SVG backgrounds for more design flexibility.
You can create a diagonal section in Webflow using CSS transforms or SVG backgrounds. Below are the steps to achieve this effect.
1. Use CSS Transform (Skew Method)
- Add a Section in Webflow and give it a class (e.g.,
diagonal-section). - Apply a Skew Transformation: In the section’s Style panel, go to Transforms > Skew, and adjust the X-axis to a slight negative or positive value (e.g.,
-10deg). - Increase Padding or Add Extra Space: Since skewing distorts content, add padding or a larger height to ensure content remains readable.
2. Use a CSS Clip Path
- Add a Section and assign a class (e.g.,
diagonal-clip). - Go to the Custom Code Section (Project Settings > Custom Code) and insert the following CSS inside
<style>tags: .diagonal-clip { clip-path: polygon(0% 0%, 100% 10%, 100% 100%, 0% 90%); }- Adjust the
polygonvalues as needed for your ideal diagonal effect.
3. Use an SVG Background
- Create an SVG Shape in a tool like Figma or Illustrator with a diagonal edge.
- Export as an SVG and upload it as a background image to your section.
- Adjust Background Settings: Set background-size to
coverand background-position as needed.
Summary
To create a diagonal section, you can use CSS transform (skew), CSS clip-path, or an SVG background. For simple slants, CSS skew or clip-path is best, while SVG backgrounds offer more design flexibility. Adjust spacing and padding to maintain readability.