AA分享网（www.aafxw.com）
IT资源下载平台

AA分享网(www.aafxw.com)是IT资源下载与IT技能学习平台。我们拒绝滥竽充数，只提供精品IT资源！

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 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

If this all went too fast for you, you find a more . Thanks for reading.