Как сделать кросбраузерный градиент из тонких полосок в псевдоэлементе?
САБЖ: Есть псевдоэлемент на body, в котором находится градиент с 3 тонкими вертикальными полосками красного цвета.
:root{
--light: red;
}
body {
position: relative;
height: 100vh;
}
body:before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translate3d(-50%, 0px, 0px);
width: 100%;
max-width: 1320px;
height: 100%;
border-right: 1px solid #111;
border-left: 1px solid #111;
margin: 0 auto;
background: linear-gradient(90deg, transparent calc(25% - 1px), var(--light) calc(25% - 1px), var(--light) 25%, transparent 25%, transparent calc(50% - 1px), var(--light) calc(50% - 1px), var(--light) 50%, transparent 50%, transparent calc(75% - 1px), var(--light) calc(75% - 1px), var(--light) 75%, transparent 75%);
background-size: 100% 1px;
}ПРОБЛЕМА: Однако, он то не работает в Хроме/Сафари или в Фаерфокс, то вообще не появляется на экране. Кроме того при сужении окна, в Фаерфоксе, все линии сливаются в одну.
ВОПРОС: Как переписать код на кросбраузерный, чтобы градиент отображался?