JSFiddle - React, Tailwind, and code Playground

by Amens

HTML

<div class="halfpage2">
<div class="clipper"></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>

<div class="halfpage2">
<div class="clipper2"></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>

<div class="halfpage">
<div class="pageflip"></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>

<div class="halfpage2">
<div class="pageflip2"></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>

<div class="halfpage2">
<div class="pageflip3"></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...

CSS

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

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

.pageflip {
  width: 0px;
  height: 0px;
  border-style: solid;

  border-color: transparent transparent transparent #FF4532;
  /* transform: rotate(0deg); */
  position: absolute;
  right: 0;
  top: 0;
  animation: 3s linear 0s infinite alternate pageflip;
}

.pageflip2 {
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 600px 50px 0 0;
  border-color: maroon transparent transparent transparent;
  transform: skew(0deg, -30deg) rotate(-6deg);
  position: absolute;
  right: -18px;
  top: 0;
}

.pageflip3 {
  width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 800px 120px 0 0;
    border-color: maroon transparent transparent transparent;
    transform: skew(0deg, -30deg) rotate(-11deg);
    position: absolute;
    right: 0px;
    top: -6px;
}

.clipper {
  width: 100%;
  position: absolute;
  z-index:1;
    height: 100%;
    overflow: visible;
    background: linear-gradient(180deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
    clip-path: polygon(89% 3%, 95% 0, 100% 100%, 100% 100%);
    animation: 4s linear 0s infinite alternate clip-flip;
}

.clipper2 {
  width: 100%;
  position: absolute;
  z-index:1;
    height: 600px;
    overflow: visible;
    background: linear-gradient(180deg, rgba(131,58,180,1) 0%, rgba(0,29,29,1) 50%, rgba(252,176,69,1) 100%);
    animation: 3s linear 0s infinite alternate clip-flip2;
}

/*
clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
clip-path: polygon(94% 0, 85% 3%, 100% 100%, 100% 100%);
clip-path: polygon(81% 0, 63% 9%, 82% 100%, 91% 100%);
clip-path: polygon(71% 0, 35% 10%, 55% 100%, 77% 100%);
clip-path: polygon(58% 0, 24% 5%, 40% 100%, 70% 100%);
clip-path: polygon(56% 0, 11% 3%, 22% 100%, 57%...