JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="box">
  <div class="inner"></div>
</div>

CSS

body {
  background: black;
  margin: 50px calc(2.5% / 2);
}
div.box {
  width: 95%;
  margin: auto;
  height: 900px;
  background: #00A4DD;
  opacity: .5;
  animation: luka 1.6s cubic-bezier(0.9, 0, 0.09, 1) forwards;
}
div.inner {
  width: 100%;
  height: 100%;
  background: url(https://picsum.photos/1920/902);
  background-size: cover;
  background-position: center;
      -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
animation: luka 2s cubic-bezier(0.9, 0, 0.09, 1) forwards;
}
@keyframes luka {
  from {
    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
  }
  to {
    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
  }
}