Create diagonal layouts as if it were 2026.

Layouts with diagonal sections have been quite popular for several years. It is not the news , And you probably won't find it in articles titled "Design Trends for 2026." But I think it's here to stay. It's a tool designers can use to bring some dynamism to all those rectangular boxes with 90-degree angles.

Therefore, it is essential that the front-end designers Learn how to implement these designs with CSS. So, if you want to learn how to do this, you've come to the right place.

As is often the case, there's nothing like a Holy Grail. There are several ways to create this type of layout. And by many, I mean three. At least three that I know of:

1. Use an SVG in the shape of a triangle. This technique is well described by Erik Kennedy in... CSS Tricks .
2. Hide part of your section using CSS-Clip-Path. Read more Diagonal containers in CSS by Sebastiano Guerriero.
3. Using CSS transformations.

You've probably already guessed which of the provided options I'm going to use. Right, the third one 🙂

So let's begin.

I. Basic marking

First, we'll set up our HTML markup. It basically consists of two containers.

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

The outer div is our full-width section, while the inner div holds the actual content. Typically, you'll have a maximum width for the inner div and provide an automatic horizontal margin to center it. For now, the outer container receives nothing but a nice gradient as a background image.

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

II. Perform the transformation.

The first idea for creating the diagonals might be to rotate the entire container. The problem here is that, after rotating the 100% wide box, you need to increase the width above 100% so that it still covers the entire display window. The amount by which you need to increase the width increases with the height of the section.

So, instead of rotating it, we'll use the lesser-known skew transformation. More precisely, we'll use SkewY to tilt the section along the Y-axis.

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

III Internal and external transformation

You may have noticed that the entire section has now been transformed, along with the content division within it. While this effect can be quite pleasing, sometimes you don't want the content to inherit the transformation. To reset everything back to normal, you must reverse the transition:

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

.content {
	max-width: 50cm;
	margin: 0 auto;
	transform: skewY(11deg);
}

IV. Use a pseudo-element

If you want to do other transitions on the inner element (i.e., some fade animation), always think about adding the re-transformation first. Other transformations will stack on top of the first one. This can be a bit tricky. Fortunately, there's a solution to the problem: instead of transforming the entire container, you can add a pseudo-element with the same dimensions and then tilt that. Our code will look like this:

 .diagonal-box {
 	position: relevant;
}

.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: 50cm;
    margin: 0 auto;
    position: relative;
}

Now all the magic happens in the previous element. Since it's positioned using absolute positioning, you need to add two relative position values. The first in the outer container, so that all its children can be positioned relative to its borders. And the other in the inner container, so that it sits on top of the previous element.

V. Share your content without fear.

You may have noticed that the contents are no longer completely enclosed by the surrounding container. If you want to fit something into the container without worrying about crossing the diagonal lines, you'll need some padding. One way to find the right amount of padding that works for you is to use some trial and error. Or you can delve into your knowledge of trigonometry and calculate the exact height:

When you look at the illustration, you can see that we already know the width of a , because that's the width of the container. So α It's the same angle we used to tilt our element (11deg). And we know that everything forms a right triangle. With this information, we can calculate x using this formula:

x = tan (α) * a / 2

Unfortunately, we can't use this with CSS calculations because the tangent function isn't supported. It's not a huge problem, though. Most of the time, the angle remains the same, so you can calculate it once and then store it. Still, there's one point where you have to be careful: Most of you will use unit degrees when you do the transformation: skewY(-11deg).If you do that, you will also need to use Deg and not Rad when calculating the tangent. A calculator standard Google uses Rad as standard.

VI Fun with customized properties

The numbers you get from calculating tan don't look so good. In this example, tan(11°) / 2 results in 0.09719. Fortunately, we can use custom properties and make our code easier to read:

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

@media screen and (minimum width: 42em) {
	:root {
		--content-width: 42em;
	}
}

Let's see what's happening here. First, we calculate our magic number and store it in a variable. Then, we also store the width of the content. Finally, we calculate the required padding by multiplying the two previous variables and also save the value in a variable. Because CSS variables are live-updated, we can change the --content-width, and the --skew-paddingIt will adjust accordingly.

Now that you have the distance stored in a variable, you can use it anywhere in your project. For example, you can arrange some boxes so that they are aligned with the diagonals. Depending on the number of boxes, you may need to use some calculations. Like:
transform: translateY(calc(var(--skew-padding) / 2));

Have fun playing!

Here you can see a working example. The values for the magic number are updated using JavaScript, the rest is pure CSS.

---