SVG Mask

HTML

<svg>
  <defs>
    <filter id="innerShadow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur"/>
<feOffset in="blur" dx="2.5" dy="2.5"/>
</filter>
    <mask id="mask" x="0" y="0" width="100" height="500">
      <rect id="alpha" x="0" y="0" width="100%" height="100%" fill="#555" />
      <polygon id="hole" points="20,20 80,20 80,70 20,100" />
    </mask>
  </defs>
  <rect id="base" x="0" y="0" width="500" height="500" mask="url(#mask)" filter="url(#dropshadow)" />
</svg>

CSS

svg {
  width: 100%;
  height: 500px;
}

body {
  background-color: #00FF00;
}