Чтобы плавный градиент превратить в четкие полоски, нужно максимально сблизить разные цвета. Там где заканчивается первый цвет, сразу же начинается второй, и вместо градиентного перехода мы имеем резкую границу.

Выглядит это вот так linear-gradient(yellow 50%, green 50%).

Но указывать для второго цвета точную позицию необязательно, можно просто указать 0, а умный браузер уже сам подставит его куда нужно.

.block{
  /*соотношение цветов*/
  background:
     linear-gradient(yellow 30%, green 0);
  /*размер повторяющегося фона*/
  background-size:100% 30px;
}
.block{
  background:linear-gradient(to right, yellow 30%, green 0);
  background-size:50px 100%;
}
.block{
  background:
    repeating-linear-gradient(45deg, 
    yellow, yellow 15px, green 0, green 30px);
}

/*или так*/

.block{
  background:
    linear-gradient(45deg, yellow 25%, green 0, 
    green 50%, yellow 0, yellow 75%, green 0);
  background-size:30px 30px;
}
.block{
  background: repeating-linear-gradient(125deg, yellow, green, yellow 30px);
}

2 комментария

  • Алексей
    Алексей
    2/05/2018, 22:08
    Спасибо, жаль всякие стаковерфловы и тостеры повытесняли такие ламповые сайты.
    • Furry_web
      Furry_web
      3/05/2018, 09:12
      :) Ну что вы, стаковерфловы и тостеры очень полезны

Оставить комментарий

*Доступные HTML-теги: a, abbr, blockquote, code, pre, del, i, em, strong, b, strike
*Не будет опубликован