JSFiddle - React, Tailwind, and code Playground

by petroveg

HTML

<div class="image">
	<span class="image-container"><img class="image-item" src="http://www.animalsglobe.ru/wp-content/uploads/2011/10/%D1%80%D1%8B%D0%B1%D0%B0-%D0%B1%D0%B0%D0%B1%D0%BE%D1%87%D0%BA%D0%B0-3.jpg"></span>
	<span class="image-container"><img class="image-item" src="http://www.animalsglobe.ru/wp-content/uploads/2011/10/%D1%80%D1%8B%D0%B1%D0%B0-%D0%B0%D0%BD%D0%B3%D0%B5%D0%BB-2.jpg"></span>
</div>

CSS

.image,
.image-container {
	overflow: hidden;
}
.image {
	position: relative;
	width: 300px;
	height: 300px;
}
.image-container,
.image-item {
	position: absolute;
	top: 0;
}
.image-container {
	right: 0;
	bottom: 0;
	left: 0;
	transform: skewY(45deg);
}
.image-item {
	height: 100%;
	transform: skewY(-45deg);
}
.image-container:first-child,
.image-container:first-child .image-item {
	left: 0;
	transform-origin: 0 0;
}
.image-container:last-child,
.image-container:last-child .image-item {
	right: 0;
	transform-origin: 100% 0;
}