CSS полосы, повторяющийся линейно-градиентный баг

Question

У меня есть полосатый разделитель в CSS с повторяющимся линейным градиентом, но он делает что-то странное, вот изображение:

Как видите, толщина некоторых полос не одинакова, я хотел бы иметь такой полосатый разделитель, но все с тем же «font-weight», я пытался исправить добавление кода или уменьшение пикселей, но не работает

Вот код:

.striped_divider {
height: 20px;
    background: -webkit-repeating-linear-gradient(135deg,               transparent 2px, transparent 7px,#cccccc 8px,#cccccc 8px);
    background: -o-repeating-linear-gradient(135deg, transparent        2px, transparent 7px,#cccccc 8px,#cccccc 8px);
    background: repeating-linear-gradient(-45deg, transparent 2px,      transparent 7px,#cccccc 8px,#cccccc 8px);
}

<div class="striped_divider"></div>

Answer 1

Как вы можете видеть в приведенном ниже примере (я добавил масштаб CSS), строки действительно имеют одинаковую ширину. Как уже сказал @Roy, это всего лишь оптическая иллюзия.

Редактировать: я заметил, что не предоставил вам возможного решения. Как уже отмечалось @Roy, возможное решение будет повторять изображение. Изображение не обязательно должно быть особенно высокого качества, поэтому я не думаю, что оно повлияет на вашу производительность.

.striped_divider {
height: 20px;
    background: -webkit-repeating-linear-gradient(135deg,               transparent 2px, transparent 7px,#cccccc 8px,#cccccc 8px);
    background: -o-repeating-linear-gradient(135deg, transparent        2px, transparent 7px,#cccccc 8px,#cccccc 8px);
    background: repeating-linear-gradient(-45deg, transparent 2px,      transparent 7px,#cccccc 8px,#cccccc 8px);
transform: scale(2.5);
}

<div class="striped_divider"></div>

Answer 2

Вы ничего не можете сделать, вот как градиент равен сотне, когда мы имеем дело с небольшими значениями закрытия (особенно в Google Chrome, в Fiferfox это должно быть лучше).

Увеличьте значения, и вы увидите, что эффект постепенно исчезнет:

.striped_divider0 {
  height: 20px;
  margin:5px;
  background: repeating-linear-gradient(-45deg, transparent 2px, transparent 7px, #cccccc 8px, #cccccc 8px);
}

.striped_divider {
  height: 20px;
  margin:5px;
  background: repeating-linear-gradient(-45deg, transparent 2px, transparent 7px, #cccccc 7px, #cccccc 8px);
}

.striped_divider1 {
  height: 20px;
  margin:5px;
  background: repeating-linear-gradient(-45deg, transparent 2px, transparent 7px, #cccccc 7px, #cccccc 10px);
}
.striped_divider2 {
  height: 20px;
  margin:5px;
  background: repeating-linear-gradient(-45deg, transparent 2px, transparent 7px, #cccccc 7px, #cccccc 15px);
}

<div class="striped_divider0"></div>
<div class="striped_divider"></div>
<div class="striped_divider1"></div>
<div class="striped_divider2"></div>

Вы можете попробовать косое преобразование, оно должно дать лучший результат:

.striped_divider {
  height: 20px;
  margin: 5px;
  background: repeating-linear-gradient(to right, transparent 2px, transparent 9px, #cccccc 10px, #cccccc 10px);
  transform: skew(-45deg);
}

.striped_divider1 {
  height: 20px;
  margin: 5px;
  background: repeating-linear-gradient(-45deg, transparent 2px, transparent 7px, #cccccc 8px, #cccccc 8px);
}

<div class="striped_divider"></div>
<div class="striped_divider1"></div>