JSFiddle - React, Tailwind, and code Playground

by Ed Bulikyan

HTML

<div class="image">
	<div class="image__bg"></div>
</div>

SCSS

.image {
	width: 100%;
	height: 300px;
	margin: 50px 0;
	font-size: 0;
	overflow: hidden;
	position: relative;
	transform: skewY(-3deg);
	
	&__bg {
		width: 100%;
		height: calc(100% + 100px);
		position: absolute;
		left: 50%;
		top: 50%;
		transform: skewY(3deg) translate3d(-50%,-50%,0);
		background: url(https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg) 50% 50% no-repeat;
		background-size: cover;
	}
}