Home>
I want to make the background color slant and make it responsive.

I'd like to ask you about the responsive setting when the background color is angled and cut diagonally.
I searched for related information, but when I narrowed the width with responsiveness, the lower right and upper left parts were partially parallel, and it didn't work.
With @media, even if I set the details fine, it didn't go smoothly.

Realize diagonally cut background that is neatly responsively displayed with CSS alone
(According to this, with @media, it is possible to respond responsively without fine setting)

I'd like to make the angle "72 degrees" more than the sample in the above article, but I don't understand the functions.

I understand that changing the angle can be done with transform: rotate (XXdeg) ;, but if you don't adjust other values, the angle may still be missing.


↑ It is an image of the height and width I want to actually do.

What should I do to calculate the calc value to support responsiveness while keeping the lower right angle at 72 degrees?

  • Answer # 1

    High school mathematics I uses trigonometric functions.

    . outer: before {
        height: calc (100%-tanθ * (sinθ * 50% + 50vw) * 2);
        top: calc (sinθ * (0.11 * 50% + 50vw);
    }

    sin72 ≈ 0.951
    tan72 ≈ 3.077

    Please search on Google this much.