平行四辺形の斜め背景の上下を直角三角形と考えて、高さを計算し、どのブラウザ幅でも均等にマージンとパディングを設定する方法を紹介します。

完成した奴

方法

三角関数を使います。
直角三角形の高さは、底辺×tanθで求められるので、角度さえわかれば高さは計算できます。
JavaScriptなどだと、三角関数を使用するためのクラスがありますが、CSSではそれがないので、まずはtanθとなる値を計算する必要があります。

tabθは高さ÷幅で求められます。
高さを以下のサイトなどで計算してから、tanθを求めると、角度が5度の場合(skewYが5deg)、tanθは「0.08748866352」になります。

https://keisan.casio.jp/exec/system/1177474036

ブラウザ幅ごとの高さを求める

早速斜め背景の高さを求めていきます。

width: 1000px
transform: skewY(5deg);

の場合、1000×0.08748866352＝87.48866352pxになります。
これをCSSで再現する場合、傾けている要素は中央を中心に傾くので、上記のサンプルの通り、三角形がはみ出す部分の高さは半分になります。
（赤枠より外）

それを踏まえてCSSで再現すると以下になります。

斜め背景の上下にマージンを設定する

margin: calc((100vw * 0.08748866352 / 2) + 20px) 0;

高さを先に計算し、設定したいマージンを足す。
サンプルは一番上の完成したもの参照。

margin: calc(100vw * 0.08748866352 / 2) 0;

応用

内側の要素ともかぶらない用にしたい場合

main要素は斜め背景の疑似要素の基準となる要素のため、そのままpaddingを設定すると、ずれるのでmain要素の中にもう一つ要素を作り、その要素に同じように三角形の高さの計算式を設定する。

斜め背景の上下にマージンを設定する

margin: calc((100vw * 0.08748866352 / 2) + 20px) 0;

高さを先に計算し、設定したいマージンを足す。
サンプルは一番上の完成したもの参照。

斜め背景について

背景を斜めにする方法については以下の記事を参考にしてください。

CSS3 : 斜め背景の作り方

簡単に説明すると、背景を斜めにしたい要素に擬似要素を作って、transform: skewY;で傾けています。