Как разделить фон пополам на 2 цвета на css?

Question

[Евгений Перин]

Есть такой макет

Как можно задать фон серым и белым пополам на css (без картинки в фоне), не задавая их отдельно левому и правому блокам? То есть нужно задать фон для общего блока. Есть такие способы?

Answer 1

[Михаил Горячкин]

Если вы именно у одного блока хотите задать двойной фон то так:

.wrapper {
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, green 50%, red 50%);
}

Comments

[Евгений Перин]

Спасибо!

[Андрей П.]

Благодарю!

Answer 2

[Алексей Николаев]

При помощи linear-gradient. Код, что в jsfiddle, сгенерирован через gradient generator, который я вам и рекомендую.

Comments

[Евгений Перин]

Спасибо!

Answer 3

[Александр Миранович]

Или так jsfiddle.net/1898d5wz/14

Answer 4

[cc08]

А как по диагонали разделить цвета ?

Comments

[Dmitrij Tau]

gradient generator просто задай направление