index.css

:root {
	--box-size: 200;
	--incline: 10;

	--box-size-px: calc(1px * var(--box-size));
	--incline-px: calc(var(--box-size-px) / 100 * var(--incline));
	--incline-perc: calc(1vw * var(--incline));

	--margin-neg: calc(0px - (var(--incline-px) / 2));
}

body {
	margin: 0;
}

.box {
	background-position: center left;
	background-repeat: no-repeat;
	background-size: cover;
	
	width: calc(50vw + (var(--incline-perc) / 2));
	height: 100vh;
	
	margin: 0;
	padding: 0;
}

#container {
	width: 100vw;
	height: 100vh;
}

#left {
	background-image: url("Images/rockmaraton.jpg");
	float: left;
	clip-path: polygon(0% 0%, calc(100% - var(--incline-perc)) 0%, 100% 100%, 0% 100%);
	margin: 0 var(--margin-neg) 0 0;
	z-index: 1;
}

#right {
	background-image: url("Images/rendezvenynaptar.jpg");
	float: right;
	clip-path: polygon(0% 0%, 100% 0%, 100% 100%, var(--incline-perc) 100%);
	margin: 0 0 0 var(--margin-neg);
	z-index: 2;
	
	top: 0;
	right: 0;
	position: absolute;
}

#divider {
	--width-init: calc(100vw / 25);
	--width: calc(var(--incline-perc) + var(--width-init));
	--left: calc(50vw - (var(--width) / 2));
	
	clip-path: polygon(0% 0%, calc(100% - var(--incline-perc)) 0%, 100% 100%, calc(0% + var(--incline-perc)) 100%);
	
	background-color: rgba(255, 51, 51, 1);
	top: 0;
	left: var(--left);
	
	width: var(--width);
	height: 100vh;
	position: absolute;
	
	z-index: 10;
}