<div class="grid">
	<div class="item">
		<h2>Item 1</h2>
	</div>
	<div class="item">
		<h2>Item 2</h2>
	</div>
</div>

@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700");

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: 'Open Sans', sans-serif;
}

h2 {
	margin: 0;
	font-size: 2.5rem;
}

.grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(3, 200px);
}

.item {
	--offset: 50px;
	--negativeOffset: calc(100% - var(--offset));
	opacity: 0.8;
	padding: 3rem;
	display: flex;
}

.item:first-child {
	grid-column: 1 / span 4;
	grid-row: 1 / span 2;
	background-color: turquoise;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 var(--negativeOffset));
}

.item:nth-child(2) {
	grid-column: 1 / span 4;
	grid-row: 2 / span 2;
	background-color: orchid;
	clip-path: polygon(0 var(--offset), 100% 0, 100% 100%, 0 100%);
	justify-content: flex-end;
	align-items: flex-end;
}