備忘録です。

先日、左右で違う背景画像を表示する方法について記述しましたが、今回は左右で背景色を変える方法です。

参考サイト
背景色を２色で分割表示する方法

CSS

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

サンプル

解説

グラデーションを表示するlinear-gradientを使用します。
https://developer.mozilla.org/ja/docs/Web/CSS/linear-gradient#Browser_compatibility
↑　linear-gradientに関する詳細です。

http://caniuse.com/#feat=css-gradients
↑　各ブラウザでの実装状況早見です

書式は...

background:linear-gradient(方向角度,色　位置,色　位置,...);

・方向角度
グラデーションの向きです。
0deg　　　 ↑ 　 (下から上へ)
90deg　　 → 　 (左から右へ)
180deg 　 ↓ 　 (上から下へ)
270deg 　 ← 　(右から左へ)

角度ではなく以下のキーワードで指定することも可能です。
to top　　　＝ 　0deg (下から上へ)
to right　　＝ 　90deg(左から右へ)
to bottom　＝　180deg(上から下へ)
to left　　　＝　270deg(右から左へ)

background:linear-gradient(to right,blue 0%,blue 50%,red 50%,red 100%);

方向角度を省略した場合は自動的に「to bottom(180deg)　上から下へ」となります。

・色　位置
実際にコードと結果を照らし合わせると分かり易いです。

下記は0%から100%にかけて、青色から赤色へと徐々に変化していきます。
(0%がスタート位置、100%がゴール位置)

background:linear-gradient(to right, blue 0%, red 100%);

下記のように位置を省略した場合にも、青から赤へのグラデーションという意味になります。

background:linear-gradient(to right,blue,red);

色やパーセント指定を変えることにより、いろいろと応用ができます。

両側を透過にする

transparentを使うと透過にできます。
下記は両サイドが透過、真ん中が赤のパターン

background:linear-gradient(90deg,transparent 0%,red 30%,red 70%,transparent 100%);