Diagonal Section

A full-width section with diagonal edges.

Copy: View demo

Dependencies

All components are based on CodyFrame.

This component includes variations. All variations share the same SCSS/JS code. They only differ in their HTML.

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:

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

Optionally, you can combine multiple classes:

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

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

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

🌄Image credits: