ミギムキ

[CSS] 背景色を2色で半分ずつ塗り分けたい

背景色を赤と青で塗り分けたサンプル

サンプルコード

html

<div class="bg_half"></div>
スポンサー広告

CSS

.bg_half { background: linear-gradient(to right, #ff0000 0%, #ff0000 50%, #0000ff 50%, #0000ff 100%); }

解説・補足

スポンサー広告

上下に塗り分けたい場合

.bg_half { background: linear-gradient(to bottom, #ff0000 0%, #ff0000 50%, #0000ff 50%, #0000ff 100%); }