2色で背景を分割する方法【CSS】

背景を2色で分割したい時ってありますよね。
今回はCSSのみで画像や余計なコードを追加せずに2色で表示する方法を紹介します。

CSSで2色で背景を分割する方法

それでは、CSSだけで背景を2色で分割してみます。

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

本来はグラデーションを作るCSSですが、上記のようにすることで背景をきれいに2色表示することができます。
ここでは、半分ずつで表示していますが、4対6など、数値を変更することで設定可能です。

コメント

タイトルとURLをコピーしました