CSSだけで、背景を2色にする

背景を半分こにする。
ん、どうやるんだっけ？
って思ったのでメモ。
『background』の『linear-gradient』をうまく使う。

白と茶色、縦の半分こ

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』がポイント

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

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

.section {
  background: linear-gradient(90deg, #ffffff 0%, #ffffff 50%, #b79376 50%, #b79376 100%);
}

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

.section {
  background: linear-gradient(45deg, #ffffff 0%, #ffffff 50%, #b79376 50%, #b79376 100%);
}

※半分こじゃなくても大丈夫。『%』を調整すればOKである。

グラデーションの応用だったりする

実は似てる。応用でいろいろ使えたりする。

▽グラデーションを使うとシマシマ模様も作れたりする
CSSだけで、しましま（縞模様）をつくる