Cutting a hole in a parent element with CSS

Question

I don\'t know if this is possible, but I would like to cut holes in an opaque wrapper set to the height and width of the window to a layer of video beneath it u

Answer 1

You could use a transparent png or svg to create the shape overlay, with the blank areas in effect becoming the mask or you could use the clip or mask property in CSS.

Here's a jsFiddle example using svg.

External JS/CSS:

HTML:

CSS:

#wrapper {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 5;
}
#videoDiv {
    position: absolute;
    z-index: -5;
}