JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
	<head>
		<title>HTML/CSS slicing!</title>
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>

	<body>
		<div class="block block-red">
			Demo
		</div>
		
		<div class="block block-green">
			Demo
		</div>
		
		<script src="ui.js"></script>
	</body>
</html>

CSS

html, body {
	margin: 0;
	padding: 0;
	height:100%;
	width:100%;
	overflow:hidden;
}


.block {
	height: 100vh;
    width: calc(50% - 100px);
    position: relative;
}

.block-red {
	background-color:red;
	float:left;
}

.block-green {
	background-color:#00ff00;
	float:right;
}

.block:after {
    position: absolute;
    top: 0px;
    content:'';
    height: 100%;
    width: 200%;
    background: inherit;
}
.block-red:after {
    right: 0;
    transform-origin: bottom right;
    transform: skewX(-20deg);
     z-index: -1;
}
.block-green:after {
    left: 0;
    transform-origin: top left;
    transform: skewX(-20deg);
     z-index: 2;
}