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

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
} 
html, body {
  height: 100%;
}

body {
  background: #1a1621;
}
.box {
  display: flex;
  flex-wrap: wrap;
  max-width: 800px;
  margin: 5% auto;
}

.box__item {
  position: relative;
  width: 50%;
  height: 250px;
  padding: 1em;
  // outline:1px solid red;
  // #201b27
  filter: drop-shadow(0 0 1px red);
  &:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 0.5px red);
    background: #001; 
  }
  &:nth-child(1) {
    &:before {
      border-radius: 1em 0 1em 1em;
    clip-path: polygon(0 0, 95% 0, 100% 5%, 100% 95%, 95% 100%, 0 100%);
    }
  }
  &:nth-child(2) {
    &:before {
      border-radius:0 1em 1em 1em;
      clip-path: polygon(5% 0, 100% 0, 100% 100%, 5% 100%, 0 95%, 0 5%);
      
    }
  }
}

.box__inner { 
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 1em;
  background: #232323;
  // background-clip: content-box;
   // clip-path: polygon(1px 1px, calc(100% - 35px) 0%, 100% 35px, 100% 100%, 0% 100%);
}