CSSのbackgroundで複数の背景色を設定してみる

こんにちは

仕事で複数の背景色を設定する機会がありましたので
今回はそのやり方を書いていこうと思います。

degの部分で角度を調整します。例えば180degにすると横になります。
色範囲の指定ですが、例えば0~50%の範囲を赤、50%~100%の範囲を青にしたい場合は下記の書き方になります。


background:linear-gradient(90deg, red 0%, red 50%, blue 50%, blue 100%);


ポイントは範囲の始まりと終わりの部分をきちんと書かないといけません。

勿論、色は何色でも使えるので細かく設定することも可能です。

codepenでサンプルを作ったので良かったらどうぞ
codepen