JSFiddle - React, Tailwind, and code Playground

by web tiki

HTML

<div></div>

CSS

div{
    height:100%;
    position:relative;
    overflow:hidden;
}
div:before{
    content:'';
    position:absolute;
    top:0; right:0;
    width:100%; height:100%;
    background-color: rgba(90, 74, 199, .8);
    border-right:40px solid rgba(173, 96, 223, .8);
    
    -webkit-transform-origin:100% 100%;
    -ms-transform-origin:100% 100%;
    transform-origin:100% 100%;
    
    -webkit-transform:skewX(30deg);
    -ms-transform:skewX(30deg);
    transform:skewX(30deg);
}


/******  FOR THE DEMO  *******/

html, body{
    background: url(http://lorempixel.com/output/people-q-c-640-480-1.jpg);
    background-size:cover;
    margin:0;padding:0;
    height:100%;
}