JSFiddle - React, Tailwind, and code Playground

by John Doe

HTML

<div><span><img src="http://artmuseum.kaluga.ru/photos/pages/74.jpg" alt="">   </span></div>

CSS

div {
     width: 300px;
    height: 300px;

  margin: 60px auto 0;
    border:5px solid #000;
  background: #ccc;
  color: #000;
  -webkit-transform: skew(-30deg);
  -moz-transform: skew(-30deg);
  -o-transform: skew(-30deg);
  -ms-transform: skew(-30deg);
  transform: skew(-30deg);
    text-align:center;
    overflow:hidden;
}
span {
    display: block;
    transform: skew(30deg);

}
img {
    height: 600px;
}