Hello.

Suppose I have a layout that covers the whole body. How can I clear a specific place on this layout and make it transparent?

The screenshot shows an example of layout:

enter image description here

  • Gradient Shading - Vadim Prokopchuk
  • Show where exactly transparency is needed? - Yuri
  • @Yuri anywhere. in the future I want to shift this area, I wanted to make it a separate block, but it did not work out transparent - ikerya

1 answer 1

With SVG, its internal element is clipPath + clip-path from 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>

Slightly more detailed description of the cut here .

  • one
    Thank you very much! - ikerya