Как залить background для половины блока?

Question

подскажите как можно залить только половину блока бэкраундом не используя background image

Answer 1

сделайте фон в виде градиента (сформировать градиент можно на онлайн сервисах, например https://cssgradient.io/)

    .text {
        line-height:    50px;
        font-size:      36px;
        font-weight:    700;
        
        border:         1px solid black;
        background:     linear-gradient(0deg, red 0%, red 33%, rgba(0,166,255,1) 33%, rgba(0,163,255,1) 66%, white 66%, white 100%);
    }

<div class = text>Мы рождены, чтоб сказку сделать былью</div>

Answer 2

div {
  height: 300px;
  background: linear-gradient(to bottom, green 50%, red 50%);
}

Цвета укажите ваши.

БЛОГ НА HUSL

Как залить background для половины блока?

Ответы (2 шт):