背景を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%);
}
グラデーションの応用で縞模様も作れます
応用でいろいろなカタチになります。
さいごに
やっぱり半分の半分でもいいですか？
いいですよー
