CSS – показать только два прямоугольника, маскируя все остальное ⇐ CSS

[Anonymous]

Когда я хочу замаскировать все, кроме прямоугольного элемента div, я использую этот код JavaScript для создания динамического значения CSS-маски:

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

const top = rect.top;
const left = rect.left;
const width = rect.width;
const height = rect.height;

const right = left + width;
const bottom = top + height;

// Create a mask that’s black everywhere except for a transparent rectangle
this.maskValue = `
linear-gradient(to right, black ${left}px, transparent ${left}px, transparent ${right}px, black ${right}px),
linear-gradient(to bottom, black ${top}px, transparent ${top}px, transparent ${bottom}px, black ${bottom}px)
`);

Как мне сделать то же самое, если у меня есть два пересекающихся прямоугольника, как на моем рисунке? (Прямоугольник 1 больше; Прямоугольник 2 меньше по высоте, но шире и находится поверх первого прямоугольника.) Я хочу затемнить все, что находится за пределами этой фигуры:

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

Подробнее здесь: https://stackoverflow.com/questions/797 ... g-else-out