Go to homepage

Projects /

Diagonal Section

A full-width section with diagonal edges.

View Demo

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


Bug report & feedback

Component Github page ↗

Project duplicated

Project created

Globals imported

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