JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>

CSS

div{
    position:relative;
    width:300px;height:300px;
    overflow:hidden;
}
div:before{
    content:'';
    position:absolute;
    left:0; bottom:0;
    width:200%; height:200%;
    -webkit-transform-origin: 15% 100%;
    -ms-transform-origin: 15% 100%;
    transform-origin: 15% 100%;
    -webkit-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    transform:rotate(-45deg);
    background:red;
}

body{background:url('http://lorempixel.com/output/people-q-c-640-480-8.jpg');background-size:cover;}