Как сверстать блок с отверстием с помощью CSS или SVG

* { 
  margin: 0; 
  padding: 0; 
} 
 
body { 
  background: url("http://www.yorkpress.co.uk/resources/images/6599017.jpg?display=1&htype=0&type=responsive-gallery")20% 10%; 
  background-size: cover; 
} 
 
.wrapper { 
  position: relative; 
  margin: 2rem; 
  width: 20rem; 
  height: 20rem; 
  background-color: white; 
  border: 0.0625rem solid red; 
} 
 
.wrapper .angle { 
  position: absolute; 
  top: -1rem; 
  width: calc(50% - 1rem); 
} 
 
.angle:first-child { 
  left: 0; 
  border-bottom: 1rem solid white; 
  border-right: 1rem solid transparent; 
} 
 
.angle:last-child { 
  right: 0; 
  border-bottom: 1rem solid white; 
  border-left: 1rem solid transparent; 
} 
 
.angle::before { 
  content: ''; 
  position: absolute; 
  top: -0.04rem; 
  z-index: -1; 
  width: 98.5%; 
  transform: scale(1.02) 
} 
 
.angle:first-child::before { 
  left: 0.0625rem; 
  border-bottom: 1rem solid red; 
  border-right: 1rem solid transparent; 
} 
 
.angle:last-child::before { 
  right: 0.0625rem; 
  border-bottom: 1rem solid red; 
  border-left: 1rem solid transparent; 
}

<div class="wrapper"> 
  <div class="angle"></div> 
  <div class="angle"></div> 
</div>

body { 
  background: url("http://www.yorkpress.co.uk/resources/images/6599017.jpg?display=1&htype=0&type=responsive-gallery")20% 10%; 
  background-size: cover; 
}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="290" height="310" viewBox="0 0 290 310"> 
  <polygon points="10 10 125 10 150 35 175 10 285 10 285 300 10 300" fill="white" stroke="red"/>	 
</svg>

* { 
  margin: 0; 
  padding: 0; 
} 
 
html, body { 
  height: 100%; 
} 
 
body { 
  background: linear-gradient(wheat , aquamarine); 
} 
 
.pane { 
  position: relative; 
  margin: 20px; 
  width: 200px; 
  min-height: 100px; 
  background: linear-gradient(to bottom, transparent 20px, white 20px); 
  border: 1px solid red; 
  border-top: 0; 
  overflow: hidden; 
  padding: 30px 10px 10px; 
  text-align: center; 
} 
 
.pane:before { 
  content: ''; 
  width: 50%; 
  position: absolute; 
  left: 0; 
  top: 0; 
  height: 20px; 
  margin: 0 0 0 -11px; 
  border-right: 1px solid red; 
  border-top: 1px solid red; 
  background-color: white; 
  transform: skewX(45deg); 
} 
 
.pane:after { 
  content: ''; 
  width: 50%; 
  position: absolute; 
  right: 0; 
  top: 0; 
  height: 20px; 
  margin: 0 -11px 0 0; 
  border-left: 1px solid red; 
  border-top: 1px solid red; 
  background-color: white; 
  transform: skewX(-45deg); 
}

<div class="pane"> 
  StackOverflow.com 
</div>