Нужно расположить 4 цвета последовательно. Каждый цветовой блок 100px. Если ширина экрана больше 400px, то повторять цвета. Если меньше, то убирать цвета. Цвета добавлять и удалять нужно по мере увеличения и уменьшения экрана. То есть, на 360px будет 3 полноценных цвета и 60px четвёртого цвета.
Допустим для экрана в 400px будет так:
Для 600px будет так:
Как это сделать на чистом CSS (без картинок)?
Ответ
Очень интересный вопрос, нашел следующее решение:
.block, .second-block {
width: 400px;
height: 100px;
margin-bottom: 20px;
background-image: repeating-linear-gradient(90deg, #FF0000 0px, #FF0000 100px, #FF9000 100px, #FF9000 200px, #FCFF00 200px, #FCFF00 300px, #12FF00 300px, #12FF00 400px);
}
.second-block {
width: 600px;
}
Инфо: MDN
Комментариев нет:
Отправить комментарий