1

Я сделала следующий гардиент для фона:

Градиент1

Возможно ли изменить направление красно-черного градиента полосок, чтобы, например, градиент имел направление to bottom (красный цвет был вверху, а черный внизу на полосках)?

Примерно так:

Градиент2

.bg {
  width: 200px;
  height: 300px;
  background:
    repeating-linear-gradient(90deg, #d43434 0px, #000 20px, transparent 20px, transparent 40px),
    linear-gradient(to bottom, #04bcef 0%, #ed8200 53%, #ed8200 100%);
}
<div class="bg"></div>

3 ответа 3

1

Использовать тут JS — совсем крайний случай, так как от этого будет сильно страдать производительность и сопровождаемость вашего кода.

Проблема данного градиента, который надо повернуть, в том, что между повторениями самого градиента нужны пробелы и нет способа CSS, чтобы их добавить.

Поэтому сделаем картинку с помощью SVG: прямоугольник, который занимает 50% ширины картинки с нужным нам градиентом.

svg {
  /* бесконечная серая тень чтобы выделить саму картинку */
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.1);
}
<svg>
  <linearGradient id="gradient" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="0" y2="1" >
    <stop  offset="0" style="stop-color:#d43434"/>
    <stop  offset="1" style="stop-color:#000"/>
  </linearGradient>
  <rect width="50%" height="100%" fill="url(#gradient)"  />
</svg>

Далее либо сохраним эту картинку и используем ссылку на неё (предпочтительно), либо зашифруем её (к примеру, с помощью этого сервиса) для использования в CSS:

.bg {
  width: 200px;
  height: 300px;
  background: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3ClinearGradient id='gradient' gradientUnits='objectBoundingBox' x1='0' y1='0' x2='0' y2='1' %3E%3Cstop offset='0' style='stop-color:%23d43434'/%3E%3Cstop offset='1' style='stop-color:%23000'/%3E%3C/linearGradient%3E%3Crect width='50%25' height='100%25' fill='url%28%23gradient%29' /%3E%3C/svg%3E") 0 0 / 40px 100% round,
    linear-gradient(to bottom, #04bcef 0%, #ed8200 53%, #ed8200 100%);
}
<div class="bg"></div>

В примере выше данному SVG установлен background-size: 40px 100% и background-repeat: repeat-x.

1

Если мы не можем вывести стандартно градиент по каким то причинам, то сделаем через циклы, что бы не городить эти span. Я их вывел в цикле на JS, ну а стилизовал в CSS. Смотрите:

var Temp = document.getElementById("elem").innerHTML;
for (var n = 1; n <= 29; n++) {
  Temp += "<span></span>";
  document.getElementById("elem").innerHTML = Temp;
}
.item {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
}

.item span {
  display: block;
  width: 10%;
  height: 100vh;
}

span:nth-child(odd) {
  background: linear-gradient(rgba(162, 40, 40, .8), #000);
}

span:nth-child(even) {
  background: linear-gradient(lightblue 0%, green 30%, orange 70%);
}
<div id="elem" class="item"></div>

1

180deg — могли бы и сами циферки поправить

body {
  width: 200px;
  height: 300px;
  background:
    repeating-linear-gradient(180deg, #d43434 0px, #000 20px, transparent 20px, transparent 40px),
    linear-gradient(to bottom, #04bcef 0%, #ed8200 53%, #ed8200 100%);
}

2
  • Мне нужно изменить не направление полос, а направление градиента на полосках. Полоски должны оставаться вертикальными. Добавила в описание изображение результата.
    – www
    25 мая 2018 в 19:23
  • тогда надо переделовать ... в этом случае так не получится , но можно наложить ещё один градиент ...под низ - утром если ответ ни кто не даст - сделаю
    – user33274
    25 мая 2018 в 19:36

Ваш ответ

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

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