JSFiddle - React, Tailwind, and code Playground

by Alex Fogarty

HTML

<div><a href="#"><img src="http://www.alexfogarty.com/alex.jpg" width="500px" height="500px" alt="see alex drink coffee" /></a></div>

CSS

body {
	padding: 50px;
	
	
	}
div {
    -ms-transform: skewX(20deg); /* IE 9 */
    -webkit-transform: skewX(20deg); /* Safari */
    transform: skewX(20deg);
	background:#B27071;
	height: 300px;
	width: 300px;
	position: relative;
	margin-left: 100px;
		overflow: hidden;
	
	
}

div img{
	
	position: absolute;
	top: -70px;
	left: -70px;
	height: 450px;
	width: 450px;
	 -ms-transform: skewX(-20deg); /* IE 9 */
    -webkit-transform: skewX(-20deg); /* Safari */
    transform: skewX(-20deg);
	overflow: hidden;
	
	}