【CSS】背景(background)を2色にする

【CSS】背景(background)を2色にする
背景を2色ってできますか?
『background』の『linear-gradient』をうまく使うとCSSだけでコーディングできますよー

半分、上と下

See the Pen CSSだけで、背景を2色にする、縦の半分こ by 125naroom (@125naroom) on CodePen.

半分、左と右

See the Pen CSSだけで、背景を2色にする、横の半分こ by 125naroom (@125naroom) on CodePen.

半分、斜め

See the Pen CSSだけで、背景を2色にする、斜めの半分こ by 125naroom (@125naroom) on CodePen.

CSS解説

縦の半分こ、『180deg』がポイント

.oneArea {
  background: linear-gradient(180deg, #b79376 0%, #b79376 50%, #315a8c 50%, #315a8c 100%);
}

横の半分こ、『90deg』がポイント

.oneArea {
  background: linear-gradient(90deg, #f0bc68 0%, #f0bc68 50%, #c4d7d1 50%, #c4d7d1 100%);
}

斜めの半分こ、『45deg』がポイント

.oneArea {
  background: linear-gradient(45deg, #f0bc68 0%, #f0bc68 50%, #c4d7d1 50%, #c4d7d1 100%);
}

グラデーションの応用で縞模様も作れます

応用でいろいろなカタチになります。

さいごに

やっぱり半分の半分でもいいですか?
いいですよー
Author

デザコト

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。

Googleさんの
おすすめ

11

/

7

2024

Googleさんの
おすすめ

11

/

7

2024

デザインの記事

「進撃のネスタ」コラボ特設サイト
ルックバック
【jQuery】スライダープラグイン「slick」実装サンプル集