【CSS】CSSだけで背景色を2色に分ける【linear-gradient応用】

ひぐま
ひぐま

こんにちは、ひぐまです。
今回はCSSだけで背景色を2分割に指定する方法をご紹介します。
グラデーションなどで使用するbackground-imageのlinear-gradientを使うことで簡単に実装できますので、 早速やり方を見ていきましょう。

HTML

今回使用するHTMLはこちら

<main>
 <div class="updown">
  <p>上下</p>
 </div>
 <div class="diagonal">
  <p>ななめ</p>
 </div>
 <div class="leftright">
  <p>左右</p>
 </div>
</main>

CSS

div要素に対してlinear-gradientで指定していきます。

background: linear-gradient(角度の数値deg, 始点の色(はじまり) 0%, 始点の色(終わり) 50%, 終点の色(はじまり) 50%, 終点の色(終わり) 100%);

本来のグラデーションは始点色　0%、終点色　100%のような指定をするのですが、 ぱっきり分けたい場合は色の初まり、終わりをしっかりと指定します。

また、degで角度を指定することで、上下、左右、斜めの分割の切り替えができますよ～

上下
180deg
斜め
45deg
左右
90deg

もちろんこれは例ですので、もっと違う角度が良いという場合は調整してみてください。

header{ top:0; z-index:100; }
main{ max-width:100%; }
main > div{ height:100vh; position:relative; }
main > div p{ color:#484848; font-size:20px; font-size:2.0rem; position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
/*2分割指定はここから↓*/
main > div.updown{ background: linear-gradient(180deg, #6CBAC6 0%, #6CBAC6 50%, #FAF9F4 50%, #FAF9F4 100%); }/*上下の2分割*/
main > div.diagonal{ background: linear-gradient(45deg, #EF6C62 0%, #EF6C62 50%, #FCEDF1 50%, #FCEDF1 100%); }/*斜めの2分割*/
main > div.leftright{ background: linear-gradient(90deg, #DBD033 0%, #DBD033 50%, #B0A7C7 50%, #B0A7C7 100%); }/*左右の2分割*/

ブラウザでの表示はこんな感じです。

デモ

もちろん2分割じゃなくて3分割したい、4分割したい、などであればパーセンテージを細かく分けて指定してあげれば可能ですよ～

linear-gradientについては簡単にシュミレートできるジェネレーターなんかも登場しているので、そういったサイトで確認して決めるのもアリです。

これと同様の仕組みで、linear-gradientの応用でストライプを描く方法についても過去に↓の記事でご紹介しておりますので、 そちらも是非チェックしてくださいね。

CSS：ストライプを描く

関連記事