背景色を２色で分割表示する方法

こんな感じに背景色を２色指定します。

##コード

colors.css

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
言葉通りですね。
方向角度を省略した場合は自動的に　to bottom(180deg)　となります。

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

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

ならば

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

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

と、位置を省略した場合にも、青から赤へのグラデーションという意味になり、
先のコードと同じ結果になります。

そういえば、冒頭の画像では、グラデーションではなく、
真ん中部分でスパッと色が区切られていました。

colors.css

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

冒頭のコードでは

青(0%)~青(50%)のグラデーション
赤(50%)~赤(100%)のグラデーション

と指定されています。

青　→　青　と、同じ色へ進むので、実際にはグラデーションが発生せず、
0%から50%まで青色で塗りたくられるという訳です。
赤も同様ですね。結果、0~50%まで青色、50%~100%まで赤色、と２色２分割となります。

％指定なので要素の幅が縮んだとしても、片方の色が削れたりもしません。
linear-gradientはグラデーションだけでなく、
３色国旗やチェック柄など、応用も利きますね！

、