斜め背景をCSSで表現する方法

こんにちは。クライマー株式会社のデザイナー・コーダーの山口です。
TOPページやLP(ランディングページ)やよく使う、斜めの背景の作り方を紹介します。
完成品はこのようなイメージです。

コードはこちらです。

<div class="diagonal">
    <div class="content">
      <h2>HELLO!</h2>
      <p>
        山路を登りながら、こう考えた。智に働けば角が立つ。
        情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。
        住みにくさが高じると、安い所へ引き越したくなる。
        どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。
      </p>
    </div>
</div>

:root {
    --width: min(100vw, 42rem);
    --angle: -5deg;
    --abs-angle: max(var(--angle), var(--angle) * -1);
    --tan-alpha: tan(var(--abs-angle));
    --skew-padding: calc(var(--width) * var(--tan-alpha) / 2);
  }

  .diagonal {
    position: relative;
    padding: var(--skew-padding) 0;
    margin-top: -1px;
  }

  .diagonal:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    transform: skewY(var(--angle));
    transform-origin: 50% 0;
    outline: 1px solid transparent;
    backface-visibility: hidden;
    background-color: #330867;
  }

  .content {
    max-width: var(--width);
    margin: 0 auto;
    padding: 1.5em;
    position: relative;
  }

  h2 {
    font-size: 2.5em;
    margin: 0 0 0.5em;
    font-weight: 900;
    color: white;
  }

  p {
    font-size: 1.25em;
    margin: 0;
    line-height: 1.5;
    color: white;
  }

以下解説です。

:root {
  /* レイアウトの最大幅を定義します。ここではビューポートの幅 (100vw) と 42rem の小さい方を選択。
     例えばビューポートが 800px の場合、100vw は 800px となり、42rem (仮に1rem = 16px とすると 672px) と比較し、672px が選ばれる。 */
  --width: min(100vw, 42rem);

  /* 傾斜の角度を定義します。ここでは -11度を指定。負の値は要素を右下がりに傾斜させます。 */
  --angle: -11deg;

  /* 角度の絶対値を算出します。tan() 関数は負の角度を扱えないため、絶対値が必要。
     ここでは -11deg と 11deg を比較し、11deg (絶対値) が選ばれる。 */
  --abs-angle: max(var(--angle), var(--angle) * -1);

  /* 角度の正接 (tan) を計算します。たとえば、角度が 11deg の場合、tan(11deg) の値は約 0.194380 になります。
     この値は傾斜にどれだけの高さ（縦方向のズレ）が必要かを示します。 */
  --tan-alpha: tan(var(--abs-angle));

  /* 傾斜に必要なパディングの量を計算します。
     例：幅が 672px、tan(11deg) が 0.194380 の場合、計算は 672px * 0.194380 / 2 = 約 65.33px となり、
     この値が上下のパディングとして適用される。 */
  --skew-padding: calc(var(--width) * var(--tan-alpha) / 2);
}

.diagonal {
  /* 要素を相対位置に設定し、他の要素との位置関係を調整可能にします */
  position: relative;

  /* 上下のパディングに --skew-padding（計算された傾斜のパディング）を適用し、
     左右のパディングは0に設定しています */
  padding: var(--skew-padding) 0;

  /* 要素の上部のマージンを微調整して、隣接する要素との間隔を細かく調整します */
  margin-top: -1px;
}

.diagonal:before {
  /* 擬似要素を作成し、デザインに影響を与えるための基盤として使用します */
  content: "";

  /* 擬似要素を絶対位置に設定し、親要素（.diagonal）に対して位置を固定します */
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;

  /* 擬似要素を指定した角度で傾斜させます（--angle変数を使用） */
  transform: skewY(var(--angle));

  /* 傾斜の基点（原点）を要素の中央上部に設定します */
  transform-origin: 50% 0;

  /* 要素の輪郭線を設定し（ここでは透明）、ビジュアルエフェクトを微調整します */
  outline: 1px solid transparent;

  /* 背面の可視性を非表示に設定し、フリップまたは回転時の表示を整えます */
  backface-visibility: hidden;

  /* 背景色を指定します */
  background-color: #330867;
}

.content {
  /* 最大幅を --width 変数に設定し、コンテンツの幅を制限します */
  max-width: var(--width);

  /* 上下左右のマージンを自動設定し、中央揃えにします */
  margin: 0 auto;

  /* パディングを全周に1.5em設定し、コンテンツと境界の間隔を取ります */
  padding: 1.5em;

  /* 要素を相対位置に設定します */
  position: relative;
}

上下の余白(padding)を増やしたい場合

元の計算式に係数を追加してパディングの大きさを調整します。例えば、パディングを大きくしたい場合は係数を増やします。

--skew-padding: calc(var(--width) * var(--tan-alpha) / 2 * 1.5);/* 1.5をかける */

異なるデバイスサイズで異なるパディングを適用したい場合、メディアクエリを使用してデバイスサイズに応じてパディングを調整します。

@media (max-width: 600px) {
  .diagonal {
    padding: 150px 0;  // 小さいデバイスでのパディング
  }
}

斜めの角度を変える方法

斜めの角度を変えるには、CSSのカスタムプロパティ（変数）である –angle の値を調整します。

急な傾斜に変更

--angle: -20deg;  // 角度を大きくして急な傾斜に

緩やかな傾斜に変更

--angle: -5deg;  // 角度を小さくして緩やかな傾斜に

背景をグラデーションにしたい場合

<!--bg-gradation(任意のクラス名)を追加-->
<div class="diagonal bg-gradation">
    <div class="content">
      <h2>HELLO!</h2>
      <p>
        山路を登りながら、こう考えた。智に働けば角が立つ。
        情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。
        住みにくさが高じると、安い所へ引き越したくなる。
        どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。
      </p>
    </div>
</div>

  .bg-gradation:before {
    background-image: linear-gradient(-135deg, #30cfd0, #330867);
  }

以上になります。
参考:(https://codepen.io/enbee81/pen/MWPwMMJ)