Непрерывный градиент на двух отдельных элементах ⇐ CSS

[Anonymous]

У меня есть два элемента div, один из которых действует как разделитель разделов.
Я хотел бы сделать непрерывный градиент над ними обоими.
Смотрите ожидаемый результат на рисунке. Там, где пустое пространство в div1 прозрачно.
Мне удается получить градиент только в обоих случаях, но не непрерывно.


Код для воспроизведения:

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

Continuous Gradient Across Two Divs

.div1 {
height: 200px;
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0),
rgba(255, 0, 0, 1)
);
}

.div2 {
height: 200px;
background: linear-gradient(
to bottom,
rgba(255, 0, 0, 1),
rgba(0, 0, 255, 1)
);
}

Подробнее здесь: https://stackoverflow.com/questions/640 ... erate-divs