Create Diagonal Layouts Like it’s 2020

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Nils Binder covers the ways:

1. Use an SVG in the form of a triangle. This technique is nicely described by Erik Kennedy on CSS-Tricks.

2. Hide part of your section using clip-path. Read Diagonal Containers in CSS by Sebastiano Guerriero or Sloped edges with consistent angle in CSS by Kilian Valkhof.

3. Using CSS Transforms

I would normally be a #2 kinda guy — slice off the top and bottom a bit, make sure there is ample padding, and call it a day. But Nils almost has me convinced this fancy math is better.

Here’s a kinda dumb clip-path way:

And Nils incredibly fancy playground:

Direct Link →

Psst! Create a DigitalOcean account and get $200 in free credit for cloud-based hosting and services.

Comments

  1. Chris Coyier
    Permalink to comment#

    Oh hey and speaking of cool operators…

    https://getwaves.io/

    https://wweb.dev/resources/css-separator-generator

  2. Antoine
    Permalink to comment#

    Hi,

    Maybe there is no need for the “manual” (or javascript-side) precompute of the tangent-based magic number in Nils’ great sample ?

    --skew_deg: -10; /* Specify angle here */

--a: calc(var(--skew_deg) * 3.14159 / 180); /* Deg to rad without unit */

--angle: calc(1rad * var(--a)); /* Keep the previous angle var */

/* Now compute the magic number in css, using taylor serie */

--magic-number: max(calc((var(--a) + (1 * var(--a) * var(--a) * var(--a) / 3) + (2 * var(--a) * var(--a) * var(--a) * var(--a) * var(--a) / 15)) / 2), calc((var(--a) + (1 * var(--a) * var(--a) * var(--a) / 3) + (2 * var(--a) * var(--a) * var(--a) * var(--a) * var(--a) / 15)) / -2));

    I like to avoid javascript if i can.
    I’m not an expert at all so I hope my comment is not a terrible suggestion ;).

  3. Frank Conijn
    Permalink to comment#

    Nils’ method of skewing is better of you want the text to skew as well. It’s actually the only method for that.

    But if you want the text to stay horizontal, I find the clip-path method much easier. That’s just a matter of understanding the polygon variant, which is quite easy: four corners, each with an horizontal and a vertical variable.

This comment thread is closed. If you have important information to share, please contact us.