6

Нужно расположить 4 цвета последовательно. Каждый цветовой блок 100px. Если ширина экрана больше 400px, то повторять цвета. Если меньше, то убирать цвета. Цвета добавлять и удалять нужно по мере увеличения и уменьшения экрана. То есть, на 360px будет 3 полноценных цвета и 60px четвёртого цвета.

Допустим для экрана в 400px будет так:

введите сюда описание изображения

Для 600px будет так:

введите сюда описание изображения

Как это сделать на чистом CSS (без картинок)?

4 ответа 4

3

Очень интересный вопрос, нашел следующее решение:

.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;
}
<div class="block"></div>
<div class="second-block"></div>

Инфо: MDN

2

Ссылка на спецификацию
Можно ли использовать
Примеры от Mozilla

.rainbow {
  box-sizing: border-box;
  background: repeating-linear-gradient(
  to right,
    red 0%, red 50px,
    orange 51px, orange 100px,
    yellow 101px, yellow 150px,
    green 151px, green 200px,
    aqua 201px, aqua 250px,
    blue 251px, blue 300px,
    purple 301px, purple 350px
  );
  width: 500px;
  height: 50px;
  margin-top: 30px;
}

.rainbow.half-width {
  width: 250px;
}
<div class="rainbow"></div>
<div class="rainbow half-width"></div>

0

Вот так можно :)

background-image: repeating-linear-gradient(90deg, #FF0000 0px, #FF0000 100px, #FF9000 100px, #FF9000 200px, #FCFF00 200px, #FCFF00 300px, #12FF00 300px, #12FF00 400px);
0

О ужас, самый ужасный вариант у меня.
Как вариант обернуть все в один див и накидать туда дивы с бэкграундами с "запасом" для самого широкого монитора.

Минусы есть: не поддерживается ie до 10, последний блок будет добавляться, если ширина контейнера кратна ширине блоков.

Это костылевидный г/код, поэтому рекомендовал бы все таки использовать не только css, а jQuery в помощь. Тогда можно будет подсчитать ширину контейнера и запилить сколько надо вложений и последний блок необходимой ширины.

Как вариант генерировать изображение на сервере и вставлять его бэкграундом с повторением по горизонтали. Для генерации необходимо будет написать хоть какую-то модель.

.flex {
  display: flex;
  flex-wrap: wrap;
  width: 500px;
  max-height: 100px;
  overflow: hidden;
}
.flex > div {
  width: 100px;
  height: 100px;
}
.flex > div.clr1 {
  background: #FF0000;
}
.flex > div.clr2 {
  background: #FF9000;
}
.flex > div.clr3 {
  background: #FCFF00;
}
.flex > div.clr4 {
  background: #12FF00;
}
<div class="flex">
  <div class="clr1"></div>
  <div class="clr2"></div>
  <div class="clr3"></div>
  <div class="clr4"></div>
  <div class="clr1"></div>
  <div class="clr2"></div>
  <div class="clr3"></div>
  <div class="clr4"></div>
  <div class="clr1"></div>
  <div class="clr2"></div>
  <div class="clr3"></div>
  <div class="clr4"></div>
  <div class="clr1"></div>
  <div class="clr2"></div>
  <div class="clr3"></div>
  <div class="clr4"></div>
  <div class="clr1"></div>
  <div class="clr2"></div>
  <div class="clr3"></div>
  <div class="clr4"></div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.