JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div id="box">
    <div class="body"></div>
</div>

CSS

body {
    margin: 0;
    overflow: hidden;
}
div#box {
    width: 120vw;
    height: 120vh;
    top: -10vw;
    position: relative;
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 80% 100%);
    border: 1px dashed black;
    animation: a cubic-bezier(0.77, 0.01, 0.16, 1.01) 1s infinite;
}
div.body {
    width: 100%;
    height: 100%;
    position: absolute;
    top: -10%;
    background: url(http://picsum.photos/1200/900) no-repeat;
    background-size: cover;
    left: -10%;
    border: 1px dashed red;
    transform: scale(1.2);
    animation: b cubic-bezier(0.77, 0.01, 0.16, 1.01) 1s infinite;
}
@keyframes a {
    100% {
        clip-path: polygon(-20% 0, 100% 0, 100% 100%, 0 100%);
    }
}
@keyframes b {
    100% {
        transform: scale(1);
    }
}
div.img {
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;
    left: 0;
    background: url(http://picsum.photos/1200/1000) no-repeat;
    background-size: cover;
}