JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div id="top1"></div>
<div id="top2"></div>

<div id="contain">
<div id="skewLeft"></div>
<div id="skewRight"></div>
<div id="skew"></div>
</div>

CSS

body {margin:0;}

#top1 {height:90px;}
#top2 {height:40px;background-color:#090979;}


#contain {position:relative;}

#skew {position:absolute;top:0;left:0;height: 300px;width: 100%;
clip-path: polygon(0px 0px, 100% 0px, 100% 80%, 0px 100%);
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,0.8) 0%, rgba(9,9,121,0.8015581232492998) 0%, rgba(0,212,255,0.8) 100%);}

#skewLeft {position:absolute;top:0;left:0;height: 400px;width: 40%;
clip-path: polygon(0px 0px, 100% 0px, 100% 0%, 0px 100%);
background:red;
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,0.2) 0%, rgba(9,9,121,0.2) 51%, rgba(0,212,255,0.2) 100%);}

#skewRight {position:absolute;top:0;right:0;height: 300px;width: 80%;
clip-path: polygon(0px 0%, 100% 0px, 100% 100%, 0px 0%);
background:yellow;
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,0.2) 0%, rgba(9,9,121,0.2) 51%, rgba(0,212,255,0.2) 100%);}