Transparent Notch

Built by CopperCreekMedia in response to a question by lampshade on StackOverflow (http://stackoverflow.com/questions/18659926/creating-a-transparent-inner-notch)

by CopperCreekMedia

HTML

<div id="notched" class="inset"><span class="cutaway"></span></div>

CSS

#notched {
    width: 0px;
    height: 50px;
}
body {
    background: #727272;
}
.inset {
    border-right: 100px solid red;
    border-top: 150px solid red;
    border-left: 150px solid red;
    border-bottom: 150px solid red;
    position: absolute;
}

.inset:before {   
    content:"";
    display: block;
    position: absolute;
    top: -150px;
    left: -150px;
    border-right: 150px solid green;
    border-top: 150px solid green;
    border-left: 150px solid green;
    border-bottom: 0px solid green;
    width: 0px;
}

.inset:after {   
    content:"";
    display: block;
    position: absolute;
    top: 50px;
    left: -150px;
    border-right: 150px solid green;
    border-bottom: 150px solid green;
    border-left: 150px solid green;
    border-top: 0px solid green;
    width: 0px;
}

.cutaway {
    top: 0px;
    left: 99px;
    border-right: 25px solid transparent;
    border-top: 25px solid black;
    border-left: 25px solid black;
    border-bottom: 25px solid black;
    position: absolute;
}