CSSだけで背景を2色表示する方法

背景を2色で表示したい時ってありますよね。
今回はCSSだけで簡単に背景を2色で表示させる方法を紹介します。

CSSだけで背景を2色表示する方法

では早速背景を2色で表示させていきます。
今回使用するのは「linear-gradient」。
背景グラデーションさせるためのアレです。

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

今回は0〜50%は赤、50~100%までが青と指定します。
同じ色で指定することで、そこまでベタで表示でき、グラデーションをさせることなく背景を2色表示できます。

うまく活用すると背景が2色のレイアウトが組みやすくなるので活用してみてください。

コメント

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