<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></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: grid;
grid-template-columns: repeat(auto-fit,calc(var(--s) + 2*var(--mh)));
justify-content:center;
--s: 80px; /* size */
--r: 1.15; /* ratio */
/* clip-path */
--h: 0.5;
--v: 0.25;
--hc:calc(clamp(0,var(--h),0.5) * var(--s)) ;
--vc:calc(clamp(0,var(--v),0.5) * var(--s) * var(--r));
/*margin */
--mv: 2px; /* 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 {
grid-column: 1/-1;
max-width:790px;
margin:0 auto;
font-size: 0; /*disable white space between inline block element */
position:relative;
padding-bottom:50px;
filter:drop-shadow(2px 2px 1px #333)
}
.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));
margin-bottom: calc(var(--mv) - var(--vc));
}
.container::before{
content: "";
width: calc(var(--s)/2 + var(--mh));
float: left;
height: 120%;
shape-outside: repeating-linear-gradient(
transparent 0 calc(var(--f) - 2px),
#fff 0 var(--f));
}
.container div::before {
padding-top:80px;
content:"Thank you \A for reading";
text-transform:uppercase;
white-space:pre;
font-size:75px;
font-family:sans-serif;
font-weight:bold;
text-align:center;
position:absolute;
color:#fff;
background:linear-gradient(45deg,#f03355,#25b09b);
inset:0;
}
.container div {
animation:show 3s infinite;
opacity:0;
}
@for $i from 1 through 43 {
.container div:nth-child(#{$i}) {
animation-delay:(2*random())*1s
}
}
@keyframes show{
60% {
opacity:1;
}
}
body {
background:#ccc;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.