🎉 Black Friday deal! 30% off your first year of CodyHouse Pro →


Progress value is 30%

Diagonal Section

A full-width section with diagonal edges.

View Demo


All components are based on CodyFrame.

This component includes variations. Variations share the same SCSS/JS code but differ in their HTML.

How to

The Diagonal Section component is used to skew the background in order to create diagonal edges.

To create a diagonal effect, add one of the following classes to the targeted section:

  • diagonal-section: diagonal effect top + bottom
  • diagonal-section-top: diagonal effect top
  • diagonal-section-bottom: diagonal effect bottom 

You can also use one of the following modifiers if you want to flip the effect:

  • diagonal-section--flip-x
  • diagonal-section-top--flip-x
  • diagonal-section-bottom--flip-x

Optionally, you can combine multiple classes:

<section class="diagonal-section-top diagonal-section-bottom diagonal-section-bottom--flip-x">
  <!-- ... -->

To edit the skew degree, update the --diagonal-section-offset custom property:

:root {
  --diagonal-section-offset: 50px;

🌄Image credits:

  • img by Wolfgang Hasselmann

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us