背景色に角度をつけて、斜めにカットした形にする場合のレスポンシブの設定について

Question

背景色に角度を斜めにつけて、うまくレスポンシブできるようにしたい。

背景色に角度をつけて、斜めにカットした形にする場合のレスポンシブの設定についてお聞きします。
関連情報を探してやってみたのですが、レスポンシブで幅を狭めると、右下や左上が、一部平行になってしまったりして、うまくいきませんでした。
@mediaで、細かく設定をしてもなかなかスムーズに行かず、そんな中、下記のサイトを見つけました。

きれいにレスポンシブ表示される斜めにカットされた背景をCSSだけで実現する
（これによると、@mediaで、細かく設定しなくてもレスポンシブが可能）

上記の記事のサンプルよりも角度をつけて「７２度」にしたいのですが、関数などがよくわかりません。

角度の変更はtransform: rotate(XXdeg);で変えられることはわかりましたが、他の数値も調整しないとやはり角が欠けたりします。

↑実際にやりたい高さと幅のイメージです。

右下を７２度の角度で、それを保ったまま、レスポンシブに対応させるためには、calcの数値をどのようにしたら良いでしょうか？

Answer 1

高校数学Iの三角関数を用いると書いてあります。

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

sin72 ≈ 0.951
tan72 ≈ 3.077

このくらいGoogleで検索してください。

Comments

[konoha0708]

この式のtanθ、sinθにどんな値を入れれば、理想の形になるのかがわからずにいます。
数学の質問になってしまっているかもしれません。すみません。

[hatena19]

質問のリンク先に計算できるページのリンクがありますよ。
https://keisan.casio.jp/exec/system/1260261251

[konoha0708]

数学が遠い記憶でした。
すみません。
ありがとうございました。