Как сделать дыру в многослойном блоке HTML?

Question

[kivi_potatoe]

Возможно ли это вообще?
Знаю способ с бэкграундами, svg, mask, но все они в своем первозданном варианте не подходят. Есть идеи? Согласен на любые костыли.

Comments

[Денис Васильев]

А background-attachment у фона фиксироавнный (fixed)? Было бы легко сделать, если фиксированный.

Answer 1

[Школьник.]

.border {
width:250px;
height:100px;
border: 100px solid pink
}

<!--ВСТАВЛЯЙТЕ DIV Сколько хотите, только размер border не забывайте менять-->
<div class="border"></div>

Comments

[kivi_potatoe]

В первом и втором блоках есть текст. То, что вы предложили создаст мне Просто пустые блоки с широченными границами.

[Школьник.]

kivi_potatoe: Создать div размером с самый большой бордер и прописать position:absolute; z-index:999;

[Школьник.]

kivi_potatoe: размером с блок 1 вместе с бордером

[Равшан Абдулаев]

если все таки вас не устраивает border рассмотрите вариант, где background верхнего слоя будет такой же как и для фона

Answer 2

[keslo]

Попробуйте использовать отрисовку на canvas:
- рисуете розовый блок
- рисуете белый блок
- очищаете часть холста (дырка)
- добавляете текст

Comments

[Ivanq]

Canvas очень затратный

[keslo]

Ivanq: вопрос в его тяжести пока не вставал. Для небольших проектов скорее всего это не существенно.

[Ivanq]

keslo: Ой, как я с вами не согласен!

[keslo]

Ivanq: c удовольствием получу совет от вас по этому вопросу. Есть опыт в применении canvas?