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

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

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

<div class="bg">コンテンツ</div>

 

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

 

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

「before」、「after」などでも実装できますが、1つの記述で実装できるので、簡単に実装できますね。
個人的には、「before」、「after」をすでに使ってしまっているときに使用しています。

 

 

関連記事