斜めの角度を変えるには？

polygonの座標の高さ（80%など）を調整します。値を小さくするほど傾斜が急になります。

レスポンシブで傾きが変わってしまいます

%指定は要素の幅・高さに比例するため、画面幅で見た目の角度が変わります。角度を一定にしたい場合はcalc()やaspect-ratioで高さを固定するか、SVG/疑似要素を検討します。

背景を斜めに区切るには、要素に clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%) を指定します。4つの頂点（左上・右上・右下・左下）の座標をずらすことで、下端や上端を斜めにできます。下に各パターンのコピペ用コードを用意しました。

下端が斜め

.diagonal {
  clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
}

上端が斜め

.diagonal-top {
  clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 100%);
  -webkit-clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 100%);
}

上下が斜め

.diagonal-both {
  clip-path: polygon(0 12%, 100% 0, 100% 88%, 0 100%);
  -webkit-clip-path: polygon(0 12%, 100% 0, 100% 88%, 0 100%);
}

角度の調整：80% や 20% の値を変えると傾斜が変わります。小さいほど急になります。
レスポンシブ：%指定は要素サイズに比例するため、画面幅で見た目の角度が変化します。角度を一定に保ちたい場合は高さを固定するか、SVGや疑似要素方式を検討してください。
細かい調整は clip-path ジェネレーターで頂点をドラッグすると簡単です。