add a transparent shape in a box using css

Question

is there any way where i can cut a transparent shape inside a non-transparent box in css like image masking.

Edit:
Something like this: https://i.stack.imgur.com/HzfP8.png

• The chessboard pattern is the body background
• The Black box is the container
• The circle is transparent so you can see the background

Answer 1

I'm not sure if I understand your question. Do you literally mean "cut" or is that a typo?

If you mean "put", then it's quite simple to put a transparent shape over a non-transparent shape.

Take a look at this code:
https://code.sololearn.com/WgrUcLYMt0t3/?ref=app

Try to select anything within the red box. You can't!

If you mean "cut" anyway, then SVG and HTML5 Canvas would be the weapon of your choice, but that is a little bit tricky and I'm not sure if those techniques support shapes with "holes".

EDIT:
I've just searched the web out of curiosity and with HTML Canvas you can cut one shape into another using the .clear() method.

EDIT 2:
I've added some Javascript.
Click and drag the red box to move it around the window.

Answer 2

No java script is needed just go ahead and add a z-index properly

Answer 3

Something like this: https://i.stack.imgur.com/HzfP8.png

• The chessboard pattern is the body background
• The Black box is the container
• The circle is transparent so you can see the background