Здравствуйте.
Допустим, у меня есть лайаут, который покрывает весь body. Как можно очистить определенное место на этом лайауте и сделать его прозрачным?
На скриншоте показан пример лайаута:
Здравствуйте.
Допустим, у меня есть лайаут, который покрывает весь body. Как можно очистить определенное место на этом лайауте и сделать его прозрачным?
На скриншоте показан пример лайаута:
При помощи SVG, его внутреннего элемента clipPath
+ clip-path
из CSS.
body {
margin:0;
background-color: red;
}
.top {
width:100%; height:500px;
background: rgba(0,0,0,.5);
clip-path: url(#clip);
}
svg { display: block; }
<div class="top"></div>
<svg height=0 width=0 viewBox="0 0 500 500">
<defs>
<clipPath id="clip" clipPathUnits="objectBoundingBox">
<polygon points="0,0 1,0 1,1 0,1
0,0
.1,.1 .1,.9 .9,.9 .9,.1
.1,.1"></polygon>
</clipPath>
</defs>
</svg>
Чуть более подробное описание вырезания тут.