<css-doodle grid="1x25">
:doodle {
@size: 100vmin;
}
clip-path: polygon(40% 71%, 50% 0, 64% 0, 64% 71%, 73% 71%, 48% 100%, 24% 71%);
background: @p(#FDFFFC, #2EC4B6, #E71D36, #FF9F1C);
animation: flip @r(3s, 7s) ease-in-out infinite;
@keyframes flip {
0%, 100% {
height: 0%;
}
25% {
transform: rotateX(@p(360deg, -360deg))
height: 50vh;
}
50% {
height: 100vh;
transform: rotateX(@p(360deg, -360deg))
}
}
</css-doodle>
body{
background: #000;
height: 100vh;
margin: 0;
overflow: hidden;
display: grid;
justify-items: center;
}
This Pen doesn't use any external CSS resources.