CSS applying opacity from child to parent layer

Question

Is there a way in CSS how the child layer to apply opacity to its parent, so the affected area of the parent element inherits the oppacity set i.e. the child element to make "opacity hole" so the body background (or the root parent's element background) appear in the specified area?

Answer 1

One option is to use a border hack, so the div is all border and the non-bordered part is empty. If you want to have content in the div, make another div that goes on top of the border div.

http://jsfiddle.net/1o1sp7o3/1/

#box {
border-top:50px solid black;
border-left:40px solid black;
border-right:50px solid black;
border-bottom:60px solid black;
width:200px;
height:200px;
box-sizing:border-box;
-webkit-box-sizing:border-box;
}

#content {
position:absolute;
width:200px;
height:200px;
border:2px solid red;
top:0;
color:white;
}