JSFiddle - React, Tailwind, and code Playground

by Amens

HTML

<div class="halfpage">
<div class="pageflip-wrapper">
<div class="pageflip"></div>
</div>
<!-- <svg xmlns="http://www.w3.org/2000/svg" class="svg-triangle">
    <polygon points="0,40 100,0 0,100 200"/>
  </svg> -->
<h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</h1>
<p>
Optio sunt laudantium, amet asperiores, facere ex. Sed ut porro eum delectus illum impedit. Doloremque unde ratione, facilis nisi numquam labore beatae.
</p>
</div>

CSS

.halfpage {
  width: 300px;
  height: 600px;
  overflow: hidden;
  background: tomato;
  color: white;
  position: relative;
}

.pageflip-wrapper {
  filter: drop-shadow(-3px 22px 10px rgba(50, 50, 0, 0.5));
  position: absolute;
  width: 100%;
  height: 100%;
}

.pageflip {
  width: 100%;
  position: absolute;
  z-index: 1;
  height: 100%;
  overflow: visible;
  /* animation: 3s linear 0s infinite alternate pageflip; */
  background-image: linear-gradient(81deg, rgba(241,241,241,1) 88%, rgba(213,213,213,1) 92%, rgba(255,255,255,1) 95%, rgba(97,97,97,1) 100%);
  background-position: 300% 225%;
  background-size: 200% 200%;
  /* background: #CCC; */
}

/* 
clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
clip-path: polygon(94% 0, 86% 4%, 100% 100%, 100% 100%);
clip-path: polygon(84% 0, 65% 4%, 84% 100%, 91% 100%);
clip-path: polygon(76% 0, 51% 4%, 74% 100%, 86% 100%);
clip-path: polygon(65% 0, 30% 5%, 48% 100%, 74% 100%);
clip-path: polygon(48% 0, 14% 5%, 34% 100%, 65% 100%); raise
clip-path: polygon(48% 0, 8% 1%, 13% 100%, 51% 100%);
clip-path: polygon(43% 0, 0 0, 0 100%, 37% 100%);
clip-path: polygon(34% 0, 0 0, 0 100%, 22% 100%);
clip-path: polygon(21% 0, 0 0, 0 100%, 11% 100%);
clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
*/

@keyframes pageflip {
  0% {
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    background-position: 51% 0%;
  }

  15% {
    clip-path: polygon(79% 5%, 91% 0, 100% 100%, 100% 100%);
  }

  30% {
    clip-path: polygon(66% 5%, 83% 0, 96% 100%, 90% 100%);
  }

  45% {
    clip-path: polygon(37% 5%, 68% 0, 86% 100%, 71% 100%);
  }

  60% {
    clip-path: polygon(14% 2%, 56% 0, 73% 100%, 48% 100%);
    background-position: 50% 100%;
  }

  75% {
    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
  }

  90% {
    clip-path: polygon(0 0, 23% 0, 4% 100%, 0% 100%);
  }

  95% {
    clip-path: polygon(0 0, 5% 0, 0 100%, 0% 100%);
  }

  100% {
    clip-path: polygon(0 0, 0 0, 0% 100%, 0% 100%);
    background-position:...