SCSS
::selection { background: cyan; }
h1 {
width: 100%;
height: 100%;
display: flex;
align-items: center;
text-align: center;
position: absolute;
margin: 0;
font-family: 'Rubik Mono One', sans-serif;
color: magenta;
font-size: 50px;
letter-spacing: -0.225rem;
background: white;
justify-content: center;
z-index: 1;
transition: font-size 250ms cubic-bezier(.59,.04,.3,1.43);
@media screen and (min-width: 768px) {
font-size: 80px;
}
@media screen and (min-width: 1024px) {
font-size: 100px;
}
&:after {
content: attr(data-letters);
position: absolute;
left: 0;
z-index: 2;
overflow: hidden;
white-space: wrap;
width: 100%;
height: 100%;
top: 0;
display: flex;
align-items: center;
text-align: center;
position: absolute;
justify-content: center;
color: blue;
background: cyan;
clip-path: polygon(0 0, 100% 0, 100% 25%, 0 77%);
}
}
