Diagonal Section

A full-width section with diagonal edges.

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">
  <!-- ... -->
</section>

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

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

🌄Image credits:

• img by Wolfgang Hasselmann

Categories

• Content and Layout > Hero
• Decorative Background

Bug report & feedback

Component Github page ↗