JSFiddle - React, Tailwind, and code Playground

by otinanaipali

HTML

<svg width="0" height="0">
  <clipPath id="clipPolygon">
    <polygon points="0 100%,100% 0,100% 100%">
    </polygon>
  </clipPath>
</svg>

CSS

body,
html {
  padding: 0;
  margin: 0;
  background: #fff
}

.left {
  background-color: #c12876;
  background-size: cover;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-position: center;
  clip-path: polygon(0 100%, 100% 0, 0 0);
}

.right {
  background-color: #04adc3;
  background-size: cover;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-position: center;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}