JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<div class="hero"></div>

CSS

body {
  background-color: #eaeaea;
}

.hero {
  position: relative;
  height: 300px;
  background-image: linear-gradient(#4568dc, #b06ab3);
  position: relative;
}
.hero::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 100 100' fill='rgb(176,106,179)' fill-opacity='1'%3E%3Cpolygon points='0,0 100,0 0,100'%3E%3C/polygon%3E%3C/svg%3E");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  content: '';
  height: 100px;
  left: 0;
  position: absolute;
  right: 0;
  width: 100%;
  z-index: 1;
  bottom: -100px;
}