CSSで背景色を2分割する方法をまとめました。

この手法を利用すれば、グラデーションの見た目を作成することも可能です。

※以下はイメージです。

コード

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

コードの解説

・方向角度
　　0deg　　↑（下から上）
　　90deg　→（左から右）
　　180deg　↓（上から下）
　　270deg　←（右から左）

　　上記、方向角度は以下のキーワードで指定することも可能です。
　　　to top　　　↑（下から上）
　　　to right　　→（左から右）
　　　to bottom　↓（上から下）
　　　to left　　　←（右から左）

・コード全体の意味
　　左から右へ「青⇒青」のグラデーションが左から0%⇒50%の領域
　　「赤⇒赤」のグラデーションがその続きから50%⇒100%の領域

誰かの役に立てれば幸いです。