<div class="contain">
  <div class="element">
    <h1>double notch</h1>
  </div>
  <div class="element">
    <h1>single notch</h1>
  </div>
  <div class="element">
    <h1>double notch box-shadow + border</h1>
  </div>
  <div class="element">
    <h1>double notch w/ background corners</h1>
  </div>
</div>

.element {
  background-color: #970747;
  padding: .75em;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.element:nth-of-type(1) {
  border: solid 10px #970747;
  box-shadow: 10px 10px 0 #970747, -10px -10px 0 #970747;
}

.element:nth-of-type(2) {
  box-shadow: 0 10px #FEF4E8, 0 -10px #FEF4E8, 10px 0 #FEF4E8, -10px 0 #FEF4E8;
}

.element:nth-of-type(3) {
  background-color: transparent;
  border: solid 10px #111;
  box-shadow: 0 20px 0 -10px #111, 0 -20px 0 -10px #111, 20px 0 0 -10px #111, -20px 0 0 -10px #111;
}

.element:nth-of-type(4) {
  background-color: transparent;
  border: solid 10px #970747;
  box-shadow: 0 20px 0 -10px #970747, 0 -20px 0 -10px #970747, 20px 0 0 -10px #970747, -20px 0 0 -10px #970747;
  background-image: linear-gradient(#970747,#970747), linear-gradient(#970747,#970747), linear-gradient(#970747,#970747), linear-gradient(#970747,#970747);
  background-size: 10px 10px;
  background-repeat: no-repeat;
  background-position: top left, top right, bottom left, bottom right;
}

.element:nth-of-type(even){
  background-color:#FEF4E8;
  color:#970747 ;
}
.element:not(:last-of-type){
  margin-right:5%;
}

.contain{
  padding: 2em;
  display: grid;
  grid-template: repeat(2,auto) / repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 2em;
}

h2{font-size: 4em;}

body{
  text-align: center;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    background-color: #13445A;
    color: #FEF4E8;
}
*{margin: 0;padding:0;box-sizing: border-box;}