Как сверстать такой макет?

.block { 
  position: relative; 
  border-radius: 5px; 
  width: 300px; 
  height: 150px; 
  box-shadow: 0px 2px 10px rgba(0, 0, 0, .4); 
  margin: 40px auto; 
} 
 
.block:before, 
.block:after { 
  position: absolute; 
  content: ''; 
  display: block; 
  width: 16px; 
  height: 16px; 
  transform-origin: 100%; 
  transform: rotate(45deg); 
} 
 
.block:before { 
  z-index: -1; 
  box-shadow: 0px 0px 10px rgba(0, 0, 0, .3); 
} 
 
.block:after { 
  z-index: 1; 
} 
 
.block-1, 
.block-1:before, 
.block-1:after { 
  background: #fff; 
} 
 
.block-1:before, 
.block-1:after { 
  left: 30px; 
  top: -2px; 
} 
 
.block-2, 
.block-2:before, 
.block-2:after { 
  background: #333; 
} 
 
.block-2:before, 
.block-2:after { 
  right: -5px; 
  top: 30px; 
}

<div class="block block-1"></div> 
<div class="block block-2"></div>

*{ 
  margin:0; 
  padding:0; 
} 
.box{ 
  width:300px; 
  height:200px; 
  border:1px solid #ccc; 
  border-right:none; 
  margin:100px; 
  position:relative; 
  background:#fff; 
} 
.box:after{ 
  content:""; 
  display:block; 
  width:40px; 
  height:40px; 
  border:1px solid #ccc; 
  background:#fff; 
  border-left:0; 
  border-bottom:0; 
  position:absolute; 
  left:93%; top:10%; 
  transform:rotate(45deg); 
  z-index:10; 
} 
.box:before{ 
  content:""; 
  display:block; 
  width:0; 
  height:200px; 
  border:1px solid #ccc; 
  position:absolute; 
  right:0; 
}

<div class="box"></div>