Неравномерный градиент

[br3t 13]

С помощью градиента в качестве фона хочу подсвечивать колонки в макете. Чередуются красные полосы процентной ширины с зелеными полосами фиксированной. В теории все вроде бы просто, на практике ширина зеленых полос различна + присутствует размытость. Что я делаю не так? Демо

[Full-R 6]

14 минут назад, br3t сказал:

С помощью градиента в качестве фона хочу подсвечивать колонки в макете. Чередуются красные полосы процентной ширины с зелеными полосами фиксированной. В теории все вроде бы просто, на практике ширина зеленых полос различна + присутствует размытость. Что я делаю не так? Демо

Попробуйте по другому. 

CSS repeating-linear-gradient() function (w3schools.com)

[br3t 13]

Спасибо за наводку, получилось их уравнять с помощью

.debug {
 background: 
  repeating-linear-gradient( 
  to right,
  #f00,
  #f00 calc(100% - 8px),
  #0f0 calc(100% - 8px),
  #0f0);
 background-size: calc(8.3333% + 0.67px);
}

Но все равно интересно, в чем проблема обычного градиента?

[Full-R 6]

39 минут назад, br3t сказал:

Спасибо за наводку, получилось их уравнять с помощью

.debug {
 background: 
  repeating-linear-gradient( 
  to right,
  #f00,
  #f00 calc(100% - 8px),
  #0f0 calc(100% - 8px),
  #0f0);
 background-size: calc(8.3333% + 0.67px);
}

Но все равно интересно, в чем проблема обычного градиента?

Не хотите попробовать view port units? VW и VH ... Calc можно избежать.

Проблема в том, что он здесь неуместен. Вы создаёте слишком много не привязанных к разметке секций.

Не хотите так же попробовать создать сразу же контейнеры для контента вместо одиночного элемента и сделать деление на визуальные секции с помощью border свойств?

Это даст вам возможность менять разметку в любое время.

Изменено 15 февраля пользователем Full-R