JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>

CSS

body {
    background: url(http://lorempixel.com/640/480);
}
div {
    height: 200px;
    width: 200px;
    transform: rotate(-45deg);
    position: relative;
    overflow: hidden;
    top: 50px;
    left: 50px;
}
div:before {
    content: "";
    position: absolute;
    left: 100px;
    height: 141px;
    width: 212px;
    display: block;
    background: url(http://i.imgur.com/mI2OFTB.jpg);
    background-size: 100%;
    transform-origin: 0% 0%;
    transform: rotate(45deg);
}
/*Just for demonstration of working*/
div:hover {
    overflow:visible;
    background: rgba(25,50,75,0.6);
}