A full-width section with diagonal edges.
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:
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:
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:
- img by Wolfgang Hasselmann