JSFiddle - React, Tailwind, and code Playground
by AndyE
HTML
<div>
</div>
CSS
div {
width: 300px;
height: 300px;
background: repeating-linear-gradient(red, orange 50px);
clip-path: inset(10% 0% 10% 10%);
animation: 4s poly infinite alternate ease-in-out;
margin: 10px auto;
}
@keyframes poly {
from {
clip-path: inset(0 0 0 0);
}
to {
clip-path: inset(0% 10% 20% 20%);
}
}