<div class="wrapper">
	<h1 data-heading="It Bends" contenteditable>It Bends</h1>
</div>
html, body {
	height: 100%;
	background: #1a5c9a;
	font-family: 'Oswald', sans-serif;
}

.wrapper {
	width: 100%;
	height: 100%;
	background: linear-gradient(to right, rgba(160,209,255,1) 0%,rgba(160,209,255,1) 1%,rgba(0,0,0,0) 100%);
	overflow: hidden;
	
	&::before {
		content: "";
		background: linear-gradient(to right, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 19%,rgba(0,0,0,0) 19%);
		width: 50%;
		left: 50%;
		height: 100%;
		position: absolute;
		z-index: 10;
	}
}

h1 {
	color: transparent;
	text-transform: uppercase;
	text-align: center;
	white-space: nowrap;
	font-size: 20vw;
	top: 50%;
	left: 50%;
	margin: 0;
	transform: translate(-50%, -50%);
	position: absolute;
	font-weight: 900;

	&:after {
		content: attr(data-heading);
		position: absolute;
		left: 0;
		top: 0;
		overflow: hidden;
		color: #2a3842;
		width: 50%;
	}

	&:before {
		content: attr(data-heading);
		position: absolute;
		left: 0;
		top: 0;
		overflow: hidden;
		color: #071a28;
		width: 100%;
		clip-path: polygon(100% 0, 50% 0, 50% 100%, 100% 100%);
		transform: perspective( 600px ) rotateY( 70deg );
	}
}
View Compiled

// JS is to make the text editable fot demo purpose, not required for the effect. Thanks for the suggestion @chriscoyier! 
var h1 = document.querySelector("h1");

h1.addEventListener("input", function() {
    this.setAttribute("data-heading", this.innerText);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.