<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>

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam rhoncus ante nibh, nec congue urna tempor et. Integer eleifend mauris id sem elementum, non mollis mauris malesuada. Vivamus venenatis, tellus ac iaculis feugiat, ex urna ornare dolor, ac finibus orci risus id sapien. Phasellus quam nisl, porta eget ipsum vitae, tincidunt eleifend diam. Quisque ac ex sed turpis porttitor dignissim. Phasellus enim purus, consequat id nisi eu, tincidunt tempus tellus. Praesent vel venenatis massa. Quisque ornare sodales ligula nec ultrices. Suspendisse feugiat, urna non sollicitudin pretium, augue </p>
</div>

<div class="panel">
<div>Size: [<span>100px</span>] <input type="range" min="20" max="200" step="10" value="100" name="s"></div>
<div>Ratio: [<span>1</span>] <input type="range" min="0" max="2" step="0.05" value="1" name="r"></div>
<div>Spacing: [<span>4px</span>]<input type="range" min="0" max="10" step="1" value="4" name="mv"></div>
<div>Clip-path<br>
hc: [<span>0.25</span>]<input type="range" min="0" max=".5" step=".05" value=".25" name="h"><br>
vc: [<span>0.35</span>]<input type="range" min="0" max=".5" step=".05" value=".35" name="v"></div></div>

.main {
  display: grid;
  outline:2px solid red;
  --s: 100px; /* size */
  --r: 1; /* ratio */
  /* clip-path */
  --h: 0.25;  
  --v: 0.35;  
  --hc:calc(clamp(0,var(--h),0.5) * var(--s)) ;
  --vc:calc(clamp(0,var(--v),0.5) * var(--s) * var(--r)); 
  
  /*margin */
  --mv: 4px; /* vertical */
  --mh: calc(var(--mv) + (var(--s) - 2*var(--hc))/2); /* horizontal */
  /* for the float*/
  --f: calc(2*var(--s)*var(--r) + 4*var(--mv)  - 2*var(--vc) - 2px);
}

.container {
  font-size: 0; /*disable white space between inline block element */
  padding-bottom:calc(var(--s)*var(--r) + var(--mv));
}

.container div {
  width: var(--s);
  margin: var(--mv) var(--mh);
  height: calc(var(--s)*var(--r)); 
  display: inline-block;
  font-size:initial;
  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));
  background: red;
  margin-bottom: calc(var(--mv) - var(--vc)); 
}
.container div:nth-child(odd) {
  background:green;
}
.container::before{
  content: "";
  width: calc(var(--s)/2 + var(--mh));
  float: left;
  height: 140%;
  shape-outside: repeating-linear-gradient(     
                   #0000 0 calc(var(--f) - 2px),      
                   #000  0 var(--f));
}


.panel {position: fixed;top: 20px;right: 20px;padding: 10px;border: 1px solid;border-radius: 10px;background: #fff;font-family: sans-serif;opacity:.5}
.panel:hover {opacity:1}
.panel > div:not(:last-child) {border-bottom: 1px solid;padding-bottom: 10px;margin-bottom: 10px;}
*,*::before {transition:0.5s linear}
let inputs = document.querySelectorAll('input[type=range]')
let elem = document.querySelector('.main')


inputs.forEach(input => {
   input.addEventListener('change', function(e) {
      var p = e.target.getAttribute('name');
      if(p=="s" || p=="mv") {
        elem.style.setProperty("--"+p, this.value+"px");
	    	e.target.previousElementSibling.innerHTML = this.value+"px";
      } else { 
        elem.style.setProperty("--"+p, this.value);
  		  e.target.previousElementSibling.innerHTML = this.value;
      }
    });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.