JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="box" style="background: url(http://picsum.photos/1200/900) no-repeat;">
    <div class="f"></div>
</div>
<div class="box" style="background: url(http://picsum.photos/1200/900) no-repeat;">
    
</div>
<div class="box" style="background: url(http://picsum.photos/1200/900) no-repeat;">
    <div class="f"></div>
</div>
<div class="box" style="background: url(http://picsum.photos/1200/900) no-repeat;">
    
</div>
<div class="box" style="background: url(http://picsum.photos/1200/900) no-repeat;">
    <div class="f"></div>
</div>
<div class="box" style="background: url(http://picsum.photos/1200/900) no-repeat;">
    
</div>
<div class="box" style="background: url(http://picsum.photos/1200/900) no-repeat;">
    <div class="f"></div>
</div>
<div class="box" style="background: url(http://picsum.photos/1200/900) no-repeat;">
    
</div>
<div class="box" style="background: url(http://picsum.photos/1200/900) no-repeat;">
    <div class="f"></div>
</div>
<div class="box" style="background: url(http://picsum.photos/1200/900) no-repeat;">
    
</div>
<div class="box" style="background: url(http://picsum.photos/1200/900) no-repeat;">
    <div class="f"></div>
</div>
<div class="box" style="background: url(http://picsum.photos/1200/900) no-repeat;">
    
</div>
<div class="box" style="background: url(http://picsum.photos/1200/900) no-repeat;">
    <div class="f"></div>
</div>
<div class="box" style="background: url(http://picsum.photos/1200/900) no-repeat;">
    
</div>

CSS

body {
    margin: 0;
}
* {
    box-sizing: border-box;
}
div.box {
    height:50vh;
    display: inline-block;
    width: 100%;
    overflow: hidden;
    position: relative;
}
div.box:nth-child(odd){
    -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
div.box:nth-child(even){
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    animation: a 1s infinite;
}
div.f {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-origin: bottom;
    background: white;
    left: 0;
    top: 0;
    transform: translateY(0%);
    animation: b 1s infinite .5s;
}
@keyframes a {
    from {-webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);}
50% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
}
@keyframes b {
    50% { transform: translateY(100%)}
}