<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 );
  }
}

// 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);
});