<div class="container">
<div class="something" data-text="somethings">
</div>
<div class="something" data-text="omething" id="pink-move">
</div>
</div>
body{
  margin:0;
  padding:0;
 font-family: 'Montserrat', sans-serif;
  font-size:5em;
  letter-spacing:.10em;
}

.container {
  flex-wrap:wrap;
  position:relative;
  width:100vw;
  height:100vh;
  
  }

.something {
  position:abslute;
  width:450px;
  margin-left:10%;
  }

.something:nth-of-type(1) {
  position:fixed;
  transform:rotate(-90deg);
  left:-275px;
  top:47%;
}

.something:before,
.something:after {
  content:attr(data-text);
}

.something:after{
  position: absolute;
}

.something:after {
  color: pink;
  -webkit-clip-path: polygon(0 0, 0 70%,150% 5%);
  clear:both;
  left:0%;
  top:0%;
}

#pink-move:after {
  left:10vw;
}

.something:before {
  color: black;
  clip: rect(0 45px 40px 0);
}



External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.