Diagonal Section
A full-width section with diagonal edges.
A full-width section with diagonal edges.
All components are based on CodyFrame.
This component includes variations. Variations share the same SCSS/JS code but 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 + bottomdiagonal-section-top
: diagonal effect topdiagonal-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">
<!-- ... -->
</section>
To edit the skew degree, update the --diagonal-section-offset
custom property:
:root {
--diagonal-section-offset: 50px;
}
🌄Image credits:
Report a bug + changelog on Github ↗ | Suggest new components ↗
📢 We use cookies to give you the best possible website experience. By using CodyHouse, you agree to our Privacy Policy.