<div class="main">
  <div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

.main {
  display:flex;
  --s: 100px;  /* size  */
  --r: 1;      /* ratio */
  
  /* clip-path parameter */
  --hc: 20px; 
  --vc: 30px;
  

  --m: 4px;    /* vertical margin */
  --m-h: calc(var(--m) + (var(--s) - 2*var(--hc))/2); /* horizontal margin */
  --f: calc(2*var(--s) + 4*var(--m) - 2*var(--vc) - 2px);
}
.container {
  font-size: 0; /* disable white space between inline block element */
}
.container div {
  width: var(--s);
  margin: var(--m) var(--m-h);
  height: calc(var(--s)*var(--r));
  display: inline-block;
  font-size:initial;
  background:red;
  clip-path: polygon(var(--hc) 0, calc(100% - var(--hc)) 0,100% var(--vc),100% calc(100% - var(--vc)), calc(100% - var(--hc)) 100%,var(--hc) 100%,0 calc(100% - var(--vc)),0 var(--vc));
  margin-bottom: calc(var(--m) - var(--vc));
}
.container div:nth-child(odd) {
  background:green;
}
.container::before {
  content: "";
  width: calc(var(--s)/2 + var(--m-h));
  float: left;
  height: 135%; 
  shape-outside: repeating-linear-gradient(#0000 0 calc(var(--f) - 3px),#000 0 var(--f));
}