JSFiddle - React, Tailwind, and code Playground

by Alexey Ukolov

HTML

<div class="block">
    <img src="http://placehold.it/350x400">
</div>

CSS

.block {
    display: inline-block;
    border: 10px solid #C0FFEE;
    transform: skewY(-20deg);
    overflow: hidden;
    height: 200px;
    margin: 100px 0 0;
}

.block img {
    position: relative;
    top: -100px;
    transform: skewY(20deg);
}