backgroundプロパティを使うことで2色、3色、もしくはそれ以上の色を同時に指定することが出来ます。
この記事ではbackgroundプロパティで複数色を指定する方法をご紹介したいと思います。

backgroundで2色を指定する方法

縦に均等に分割する方法

backgroundプロパティで縦に分割する方法はこちら。

<div class="bg_2_180"></div>

.bg_2_180{
    background: linear-gradient(180deg, #dc5a45 0%, #dc5a45 50%, #e8c72e 50%, #e8c72e 100%);
    width: 100%;
    height: 100px;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

横に均等に分割する方法

backgroundプロパティで横に分割する方法はこちら。

<div class="bg_2_90"></div>

.bg_2_90{
    background: linear-gradient(90deg, #dc5a45 0%, #dc5a45 50%, #e8c72e 50%, #e8c72e 100%);
    width: 100%;
    height: 100px;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

斜めに均等に分割する方法

backgroundプロパティで斜めに分割する方法はこちら。

<div class="bg_2_45"></div>

.bg_2_45{
    background: linear-gradient(45deg, #dc5a45 0%, #dc5a45 50%, #e8c72e 50%, #e8c72e 100%);
    width: 100%;
    height: 100px;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

backgroundで3色を指定する方法

縦に均等に分割する方法

backgroundプロパティで縦に分割する方法はこちら。

<div class="bg_3_180"></div>

.bg_3_180{
    background: linear-gradient(180deg, #dc5a45 0%, #dc5a45 33.3%, #e8c72e 33%, #e8c72e 66.6%, #3d8582 66.6%, #3d8582 100%);
    width: 100%;
    height: 100px;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

横に均等に分割する方法

backgroundプロパティで横に分割する方法はこちら。

<div class="bg_3_90"></div>

.bg_3_90{
    background: linear-gradient(90deg, #dc5a45 0%, #dc5a45 33.3%, #e8c72e 33%, #e8c72e 66.6%, #3d8582 66.6%, #3d8582 100%);
    width: 100%;
    height: 100px;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

斜めに均等に分割する方法

backgroundプロパティで斜めに分割する方法はこちら。

<div class="bg_3_45"></div>

.bg_3_45{
    background: linear-gradient(45deg, #dc5a45 0%, #dc5a45 33.3%, #e8c72e 33%, #e8c72e 66.6%, #3d8582 66.6%, #3d8582 100%);
    width: 100%;
    height: 100px;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

解説

backgroundプロパティで複数色を指定する基本形はこちら。

background: lineargradient( 分割する角度, 1色目の色 開始位置, 1色目の色 終了位置, 2色目の色, 2色目の色 2色目の終了位置 );

ポイントはこちら。

1色目の開始位置は「0%」とします。そして、2色目、3色以上の場合は最後の色の終了位置は「100%」とします。
角度は指定する数値によって縦に分割、横に分割、斜めに分割することが出来ます。

• 180deg 横に分割
• 90deg 縦に分割
• 45deg 斜めに分割

このようにbackgroundプロパティでlineargradient()を使うことで複数色の色指定をすることが出来ます。

また、backgroundプロパティでlineargradient()を使うことでグラデーションを指定することも出来ます。
グラデーションの指定方法はこちらの記事で詳しくご紹介しています。

【CSS】背景・テキスト・枠線にグラデーションをかける方法

まとめ

いかがでしたか？
画像で対応しなくてもCSSの指定で2色、3色などの複数色の表現をすることは出来ます。
是非、使ってみて下さい。