linear-gradientの使い方とコードの意味

Question

三角形のレイアウトを再現したくて検証ツールで調べた所linear-gradientを使っていました。
しかしコードの意味が理解できないので教えて頂きたいです。

css

background: linear-gradient(
135deg
, #008DD5 0%, #008DD5 50%, transparent 50%, transparent 100%);
}

自分で調べたことや試したこと

MDNで使い方を調べた
グラデーションと記載されたいたが、意味がよくわかりませんでした

使っているツールのバージョンなど補足情報

visual studio code

Answer 1

こんにちは。

135degは135度という意味です。0度は真上に向かうグラデーションで時計回りなので、斜め右下に向かうグラデーション、ということです。

#008DD5 0%で、色経由点を表します。
#008DD5はカラーコードです。色経由点の色を表します。これは青色系統の色のようです。
0%は色経由点の位置です。パーセンテージはグラデーションの位置を表します。0%は始点、100%は終点です。
つまり、#008DD5 0%は「0%（始点）では青」という意味です。

色経由点はカンマで並べることができます。
#008DD5 0%, #008DD5 50%は、「0%（始点）では青、50%では青」という意味です。0%と50%の色が同じなので、色は変化しません。青のべた塗りになります。
transparent 50%, transparent 100%は、「50%では透明、100%では透明」という意味です。0%と50%の色が同じなので、色は変化しません。透明のべた塗りになります。
つまり、#008DD5 0%, #008DD5 50%, transparent 50%, transparent 100%は「0%から50%までは青のべた塗り、50%から100%までは透明のべた塗り」という意味です。

ですので、ご提示のスタイルを正方形のボックスに適用すると、左上隅・右上隅・左下隅で作られる青い三角形と透明の残りの部分、という背景になります。

Comments

[退会済みユーザー]

丁寧に説明して頂き、ありがとうございます。
コードの意味を理解することが出来ました！