JSFiddle - React, Tailwind, and code Playground

by Dini Mer

HTML

<div class="photo"></div>

CSS

body { padding: 40px; }

.photo {
    transform: skewX(35deg); 
    -ms-transform: skewX(35deg); /* IE 9 */
    -webkit-transform: skewX(35deg); /* Safari and Chrome */
    width: 100px; 
    height: 92px; 
    border-right: 1px solid black; 
    border-left: 1px solid black; 
    
    /* new styles */
    position: relative;
    overflow: hidden;
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
}

.photo::before {
    content: "";
    transform: skewX(-35deg); 
    -ms-transform: skewX(-35deg); /* IE 9 */
    -webkit-transform: skewX(-35deg); /* Safari and Chrome */
    background-image: url('http://placekitten.com/200/200'); 
    background-repeat: no-repeat; 
    background-position: top left; 
    
    /* new styles */
    position: absolute;
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    width: 2000px; /* something ridiculously big */
    height: 2000px; /* something ridiculously big */
}