Как сохранить ширину линии на диагональной границе, используя повторяющийся линейный градиент?

Question

Я пытаюсь использовать повторяющийся линейный градиент на границе, которая имеет 1px широкая линия с 6px расстояния между каждой строкой.

Может кто-нибудь сказать мне, что я делаю не так, чтобы линии не были одинаковой ширины, когда они повторяются? Я пытался настроить значения пикселей, но они никогда не совпадают.

JSFiddle

background: gray repeating-linear-gradient(-45deg, transparent, transparent 1px, #fff 1px, #fff 6px);

Answer 1

Основываясь на этой статье CSS Tricks от Ana, кажется, что браузеры имеют различия в рендеринге, когда дело доходит до repeating-linear-gradient, В конце статьи есть сравнительные скриншоты, в которых показано, как правильно отображать данные в Firefox в Windows, но не в Chrome в Windows и Firefox в OS X.

Решение:

Кажется, одно решение установлено background-size и сделать два удара частью градиента (в отличие от рассматриваемого кода, где есть только один штрих). Размер фона рассчитывается как последняя цветовая точка остановки (14px), деленная на квадратный корень из 2 (который приблизительно становится 10px).

background-size настройка обязательна, потому что без этого она не работает в Opera, Chrome. Кажется, он делает линию немного толще, но, по крайней мере, работает лучше, чем раньше.

Это работает в Chrome, Opera, Edge, IE11, Firefox в Windows и Firefox в OS X.

.border {
  background: gray repeating-linear-gradient(-45deg, transparent, transparent 1px, #fff 1px, #fff 7px, transparent 7px, transparent 8px, #fff 8px, #fff 14px);
  background-size: 10px 10px; /* equal to last color stop point / sqrt(2) - 14 / 1.414 */
  height: 50px;
}

<div class="border"></div>

Ниже приведен скриншот с Firefox на OS X (спасибо web-tiki за скриншот).