Tips for Pure CSS Diagonal Layouts

Below you will find a few tips for creating diagonal layouts. If this is all too fast for you, check out this step-by-step tutorial.

1. Skew to the rescue.

When you rotate a 100%-width box, you get some ugly corners and need to make the whole box wider than 100%. The problem here is that you maybe don't know the height of the element, and then you also don't know how much wider than 100% it has to be.

So instead of transform: rotate(-11deg) use transform: skewY(-11deg) and the transformed section stays within it's horizontal boundaries.

transform: rotate(-11deg);

transform: skew(-11deg);

2. Use a pseudo-element.

If you want diagonal sections, but still write horizontally, you need to re-transform the content inside the section. What you can do instead is insert a :before pseudo-element, position it absolute and then transform this element instead of the section itself.

The content needs to be re-transformed, when you transform the whole section.

Content is not affected when transforming a pseudo-element in the background.

3. Find the right padding.

Because of the transformation, some elements bleed into the previous and the next element. To find a safe area where you can place content, you need to add some padding. The amount of padding can be calculated with this formula:
x = tan(α) * a / 2

Sadly you can not make this completely dynamic without javascript, as CSS calculations don't support sin, cos and tan.

Pro Tip: I think most of you will use deg as unit, when you do the transformation: skewY(-11deg).
If you do so, you also have to use Deg and not Rad when you calculate tangens. The standard google calculator uses Rad as default.

4. Use CSS-Variables to store the padding-value.

You can use CSS Custom Properties to store the calculated value for the needed padding and reuse it. For example you can translate Elements so that they are in line with the diagonal background-line.

transform: translateY(var(--skew-padding))

And that's it