線形グラデーションを使った背景色の実装

0.概要

画像の背景に色を徐々に変化させるグラデーションを配置させたデザインも多いと思います。
また、背景の帯を真横ではなく、斜めに変形させたりするデザインも多いと思います。
以下のようなデザインです。

そういった時は、疑似要素に線形グラデーション（linear-gradient）で色の変化をつけ、clip-pathで変形させます。

1.線形グラデーションのCSS

reason__item-imageという画像を配置する要素の背景に疑似要素で線形グラデーションの背景色を付けました。

線形グラデーション（linear-gradient）は直線的に色を変化させる場合の属性です。
オプションの「90deg」は方向を表しています。「0deg」が下から上へでそれから時計回りで表します。

「90deg」は左から右へ
「180deg」は上から下へ
「270deg」は右から左へ

です。

.reason__item-image {
    position: relative;
    padding-top: 40px;
    padding-bottom: 86px;

    &::before {
    position: absolute;
    content: "";
    inset: 0;
    background: linear-gradient(90deg, #0a2044 0%, #0087b1 100%);
    padding: 48px 24px;
    /* ここで左右を斜めにカット（%は斜め角度の調整値） */
    clip-path: polygon(0 28%, 100% 0, 100% 72%, 0 100%);
    z-index: -1;                 // 子要素より背面へ
    pointer-events: none;        // クリック邪魔しない

　｝
｝

2.始点と終点の色の設定

始点と終点の色はデザインカンプより取得します。

オブジェクトを選択して、「アピアランス」をクリックすると「色パネル」が表示されます。
そこからグラデーションのアイコンをクリックします。

始点の◯をクリックすると、始点の色コードを取得できます。X軸の位置は0％です。

終点の◯をクリックすると、終点の色コードを取得できます。X軸の位置は100％です。

これをlinear-gradientのパラメータに設定します。

3.背景の変形

背景の変形はclip-pathを利用します。polygonは多角形です。

そして、多角形の頂点を（X軸 Y軸,X軸 Y軸,X軸 Y軸,X軸 Y軸）の左上、左下、右上、右下の順番で記入します。
細かい値はデザインカンプと合わせながら調整します。

以上