Обводка и создание сложной фигуры в HTML

* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
} 
 
body { 
  text-align: center; 
} 
 
.wrapper { 
  display: inline-block; 
  border: 1px solid blue; 
  position: relative; 
  height: 155px; 
  margin-top: 10px; 
} 
 
.items { 
  display: flex; 
  justify-content: flex-start; 
  padding: 4px; 
} 
 
.item { 
  width: 150px; 
  height: 145px; 
  background: red; 
  border: 1px solid #fff; 
} 
 
.elem { 
  width: 120px; 
  height: 30px; 
  background: #fff; 
  border: 1px solid blue; 
  border-top: none; 
  float: right; 
  text-align: center; 
  margin-right: -1px; 
} 
 
.elem button { 
  display: block; 
  width: 90%; 
  height: 90%; 
  margin: auto; 
} 
 
.wrapper:after { 
  content: ""; 
  border-left: 10px solid transparent; 
  border-right: 10px solid blue; 
  border-bottom: 10px solid transparent; 
  border-top: 10px solid transparent; 
  position: absolute; 
  left: -20px; 
  top: 50px; 
  z-index: 9; 
} 
 
.wrapper:before { 
  content: ""; 
  border-left: 8px solid transparent; 
  border-right: 8px solid #fff; 
  border-bottom: 8px solid transparent; 
  border-top: 8px solid transparent; 
  position: absolute; 
  left: -16px; 
  top: 52px; 
  z-index: 10; 
}

<div class="wrapper"> 
  <div class="items"> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
  </div> 
  <div class="elem"> 
    <button>тарабарщина</button> 
  </div> 
</div>