Create Diagonal Layouts Like It’s 2020, by NILS BINDER

There are three ways to achieve a diagonal layout:

  • SVG (see Erik Kennedy’s article)
  • CSS Clip-path (see article by Sebastiano Guerriero or Kilian Valkhof)
  • CSS conversion

This article shows you how to use CSS transformations (corresponding to the Transform property) to achieve diagonal layout effects.

1. HTML structure

<div class="diagonal-box">
    <div class="content">.</div>
</div>
Copy the code

Add a basic CSS style:

.diagonal-box {
    background-image: linear-gradient(45deg, #6303B1, #ff0099);
} 
.content { 	
    max-width: 50em;
    margin: 0 auto; 
}
Copy the code

The following results are obtained:

First, start the transition

The first thing that comes to mind is to rotate the entire container element. But the problem is that the.gut-box, which is 100 percent wide, can no longer be rotated horizontally to cover the entire viewport area. To do this, we need to increase the width above 100% to solve this problem.

There is also the idea that, instead of using rotation, the desired effect can be achieved using skew-transformation, which is probably not well known. For accuracy, we tilt the. Gut-box only along the Y-axis.

.diagonal-box {
    background-image: linear-gradient(45deg, #6303B1, #ff0099);
    transform: skewY(-11deg);
}
Copy the code

Results obtained:

3. Internal and external transformation

The tilting effect above is the conversion effect for the entire container, including.content. While this property solves some problems, it also creates some. Sometimes, we don’t want to tilt the content too. To do this, we need to do another reverse conversion on the content:

.diagonal-box {
    background-image: linear-gradient(45deg, #654ea3, #eaafc8);
    transform: skewY(-11deg);
}

.content {
    max-width: 50em;
    margin: 0 auto;
    transform: skewY(11deg);
}
Copy the code

Effect:

Use pseudo-elements

If the content element also contains transition effects (for example, fade animations). So before we write these effects, we have to think about whether we want to reverse transform the elements, which is kind of annoying. Fortunately, there is a solution: instead of skewing the entire container, we tilt it with pseudo-elements the same size as the container.

.diagonal-box {
    position: relative;
}

.diagonal-box::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-image: linear-gradient(45deg, #654ea3, #eaafc8); 	
    transform: skewY(-11deg);
}

.content {
    max-width: 50em;
    margin: 0 auto;
    position: relative;
}
Copy the code

The ::before element here uses absolute positioning. For this, we also need a position: relative statement for.gut-box and.content. Is added for.gut-box to restrict ::before is positioned relative to it; The. Content element will be overwritten by ::before when absolute positioning is used. Content elements will be overwritten by position: relative.

To see the effect:

Five, decent display content

Look again at the image above and see that the content element is beyond the edge of the slanted background. It doesn’t feel like it’s surrounded by the slanted background. We need to add a bit of padding. One way is to debug repeatedly in the console, but not flexible enough; Another way to do this is to delve into the mathematics involved, and calculate the exact padding. Take a look at the chart below:

According to the diagram, the width of A is known, that is, the container width. This Angle alpha is equal to the number of degrees we’re deflecting in the Y-axis, which is 11 degrees. We’re looking for one of the x sides of a right triangle. According to the formula:

X is tan alpha times a over 2

** Unfortunately, we can’t do this in CSS computing. But this is not a big problem. In most cases, the deflection Angle is basically constant, so we can just store the calculated value.

Use CSS variables

By calculation, tan(11°) / 2 is approximately 0.09719. We can store it in a CSS variable. This way, the code can be a little simpler:

:root {
    --magic-number: 0.09719; / * tan (11 °) / 2 * /
    --content-width: 100vw;
    --skew-padding: calc(var(--content-width) * var(--magic-number));
}

@media screen and (min-width: 42em) {
    :root {
    	--content-width: 42em; }}Copy the code

–skew-padding is the padding applied to the content element, which changes dynamically as the –content-width changes.

You can also use –skew-padding for other effects. For example, multiple boxes are arranged along a diagonal line.

Seven, the Demo

Codepen. IO/enbee81 / pen…

Click the link above to see all the relevant case code covered in this article.

Thanks for reading!

(End of text)

Advertising time (long term)

I have a good friend who owns a cattery, and I’m here to promote it for her. Now the cattery is full of Muppets. If you are also a cat lover and have the need, scan her FREE fish QR code. It doesn’t matter if you don’t buy it. You can just look at it.

(after)