<div class="container">
	<div class="wrapper">
		<div class="image" style="--_image: url(https://images.unsplash.com/photo-1579558449098-2bb4e1cfc3ed?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8c3R1dHRnYXJ0fGVufDB8fDB8fHww)"></div>
		<div class="image" style="--_image: url(https://images.unsplash.com/photo-1617728036133-7ced2e1cba2e?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8c3R1dHRnYXJ0fGVufDB8fDB8fHww)"></div>
		<div class="image" style="--_image: url(https://images.unsplash.com/photo-1582718453125-39689753037b?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8c3R1dHRnYXJ0fGVufDB8fDB8fHww)"></div>
		<div class="image" style="--_image: url(https://images.unsplash.com/photo-1552124304-4e34dc2fd70d?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjJ8fHN0dXR0Z2FydHxlbnwwfHwwfHx8MA%3D%3D)"></div>
		<div class="image" style="--_image: url(https://images.unsplash.com/photo-1572773207118-6dd79ef2f4d8?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjN8fHN0dXR0Z2FydHxlbnwwfHwwfHx8MA%3D%3D)"></div>
	</div>
</div>

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
}

.container {
	margin-block: 10vh;
	
	width: 100%;
	overflow: hidden;
}

.wrapper {
	--_items: 5;
	--_angle: 3rem;
	--_gap: 10px;
	
	position: relative;
	height: auto;
	display: grid;
	grid-template-columns: repeat(var(--_items), 1fr);
	margin-inline: calc(var(--_angle) * -1);
}

.image {
	background: #eee;
	aspect-ratio: 4 / 3;
	margin-inline: calc((var(--_angle) * 0.5) * -1 + var(--_gap));
	clip-path: polygon(var(--_angle) 0, 100% 0, calc(100% - var(--_angle)) 100%, 0 100%);
	background-image: var(--_image);
	background-position: center;
	background-size: cover;
}