<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);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.