背景色を２色で分割表示する方法
こんな感じに背景色を２色指定します。
コード
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);
と、位置を省略した場合にも、青から赤へのグラデーションという意味になり、
先のコードと同じ結果になります。
そういえば、冒頭の画像では、グラデーションではなく、
真ん中部分でスパッと色が区切られていました。
background:linear-gradient(90deg,blue 0%,blue 50%,red 50%,red 100%);
冒頭のコードでは
青(0%)~青(50%)のグラデーション
赤(50%)~赤(100%)のグラデーション
と指定されています。
青 → 青 と、同じ色へ進むので、実際にはグラデーションが発生せず、
0%から50%まで青色で塗りたくられるという訳です。
赤も同様ですね。結果、0~50%まで青色、50%~100%まで赤色、と２色２分割となります。
％指定なので要素の幅が縮んだとしても、片方の色が削れたりもしません。
linear-gradientはグラデーションだけでなく、
３色国旗やチェック柄など、応用も利きますね！
、