背景を２色で分割したい時ってありますよね。
今回はCSSのみで画像や余計なコードを追加せずに２色で表示する方法を紹介します。
CSSで２色で背景を分割する方法
それでは、CSSだけで背景を２色で分割してみます。
<div class="bg">コンテンツ</div>
.bg{
background:linear-gradient(90deg,red 0%,red 50%,blue 50%,blue 100%);
}
本来はグラデーションを作るCSSですが、上記のようにすることで背景をきれいに２色表示することができます。
ここでは、半分ずつで表示していますが、4対６など、数値を変更することで設定可能です。
「before」、「after」などでも実装できますが、１つの記述で実装できるので、簡単に実装できますね。
個人的には、「before」、「after」をすでに使ってしまっているときに使用しています。
ABOUT ME
