今回は背景を斜めに傾けた要素の高さを計算して、上下の要素や、中身と被らないようにする方法を記載します。

完成した奴

斜め背景について

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

CSS3 : 斜め背景の作り方

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

やりたい事

上記サンプルの通り、斜め背景の要素に隙間ができてしまいます。
（Code Penの幅を×0.5などにするとわかりやすいです。）
余裕をもってマージンとパディングを設定すればある程度のブラウザ幅までは対応できますが、逆にブラウザ幅を縮めたときに、余白が多すぎるという問題も生じます。

今回やりたいことは、斜め背景の上下を直角三角形と考えて、高さを計算し、どのブラウザ幅でも均等にマージンとパディングを設定することです。

方法

三角関数を使います。
直角三角形の高さは、底辺×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;

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