How make cutting in div from rectangle?

Question

I want cutting from div the rectangle with css.

example: https://i.stack.imgur.com/RWHj9.png

I want cutting area upping transparent, which pick up body background color. (transparent)

How to make it?

Answer 1

The basic idea could be done with borders with opacity set.

.bg {
width:400px;
height: 300px;
background-image: url('https://placekitten.com/400/300')
}

.weirdBox {
   box-sizing: border-box;
   border-style: solid;
   border-width: 30px 50px;
   border-color: rgba(0, 0, 0, .5);
   width: 200px;
   height: 200px;
   margin-left: 50px;
}

<div class="bg">
<div class="weirdBox"></div>
</div>