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

CSSで背景色を2分割する方法をまとめました。

この手法を利用すれば、グラデーションの見た目を作成することも可能です。

※以下はイメージです。

コード

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

コードの解説

・方向角度
  0deg  ↑(下から上)
  90deg →(左から右)
  180deg ↓(上から下)
  270deg ←(右から左)

  上記、方向角度は以下のキーワードで指定することも可能です。
   to top   ↑(下から上)
   to right  →(左から右)
   to bottom ↓(上から下)
   to left   ←(右から左)

・コード全体の意味
  左から右へ「青⇒青」のグラデーションが左から0%⇒50%の領域
  「赤⇒赤」のグラデーションがその続きから50%⇒100%の領域

誰かの役に立てれば幸いです。

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中