Соседние линейные градиенты имеют небольшие зазоры после масштабирования. ⇐ CSS

[Anonymous]

Код: Выделить всё

.bg {
position: relative;
--r: 32px;

--corner-size: var(--r) var(--r);

--corner-gradient: black 0%, black calc(var(--r) - var(--r)), transparent var(--r);

--fill-gradient: transparent 0%, black var(--r), black calc(100% - var(--r)), transparent 100%;

--fill-narrow-size: calc(100% - var(--r) * 2);

background-image:
linear-gradient(to right, var(--fill-gradient)),
linear-gradient(to bottom, var(--fill-gradient)),
radial-gradient(at bottom right, var(--corner-gradient)),
radial-gradient(at bottom left, var(--corner-gradient)),
radial-gradient(at top left, var(--corner-gradient)),
radial-gradient(at top right, var(--corner-gradient));

background-size:
100% var(--fill-narrow-size),
var(--fill-narrow-size) 100%,
var(--corner-size),
var(--corner-size),
var(--corner-size),
var(--corner-size);

background-position: center, center, top left, top right, bottom right, bottom left;

background-repeat: no-repeat;
}

Код: Выделить всё

Я пытаюсь реализовать прямоугольное фоновое изображение с градиентом. Я в принципе этого добился. Однако после добавления масштабирования на границах градиента на заднем плане появятся пробелы.
Я пробовал:

• Реализовать это с помощью SVG и использовать абсолютное позиционирование. не работает
• Реализуйте его с помощью SVG, преобразуйте в URL-адрес данных, а затем назначьте URL-адрес данных для фонового изображения. не работает
• Реализуйте его с помощью SVG и преобразуйте в изображение PNG с помощью Canvas. работа

Я хочу знать, какие существуют решения, не использующие JavaScript.

Подробнее здесь: https://stackoverflow.com/questions/797 ... er-scaling