ミギムキ

[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%); }

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。