Создать обратный клип -пат - CSS или SVG ⇐ Html

[Anonymous]

Я пытаюсь создать то, что в сущности, наоборот, клип-пат CSS. При использовании Clip-Path изображение или Div обрезают так, что остается только указанная вами форма, а остальная часть фона эффективно удаляется. < /p>

Мне бы хотелось, чтобы, если я обрезал форму, она в основном пробивает отверстие в верхнем большинстве слой и удаляет форму, а не на фоне. Это возможно? Я также был бы открыт для решения SVG, но я новичок в SVG, так что будьте добры < /p>

В основном, в коде ниже у меня есть синий квадрат, расположенный абсолютно Внутри красного квадрата и хочу иметь возможность ударить форму из синего квадрата, чтобы красный слой внизу показал, где раньше была форма. В действительности будет изображение в качестве фонового слоя, поэтому я не могу принять псевдо -эффект, который имитирует то, что я хочу, но на самом деле не выбивает форму. < /P>

Любая помощь была бы потрясающей!

codepen: https://codepen.io/emilychews/pen/gqmyqxbr/>

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

body {
width: 100%;
height: 100vh;
padding: 0; margin: 0;
display: flex;
}

#box {
margin: auto;
position: relative;
width: 33%;
height: 200px;
background: red;
}

#innerbox {
width: 100%;
height: 100%;
background: blue;
top: 0;
left: 0;
position: absolute;
}< /code>

Подробнее здесь: https://stackoverflow.com/questions/487 ... css-or-svg