Есть ли способ на css это реализовать более красиво?

Увидел на просторах интернета вот такой эффект для текста на svg, и судя по названию понял что этот эффект называется слешед
Решил его реализовать на чистом css без вкусного svg

и вот что получилось :
html, body { height: 100%; } body { -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -o-transform: rotate(-5deg); -ms-transform: rotate(-5deg); transform: rotate(-5deg); } .lensky { position: absolute; top: 0; left: 0; right: 0; bottom: 0; text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5); } .lensky .top, .lensky .bottom { text-align: center; font: 62px/100px arial; text-transform: uppercase; text-align: center; overflow: hidden; color: #000; } .lensky .top:before, .lensky .bottom:before { content: attr(title); -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -o-transform: rotate(5deg); -ms-transform: rotate(5deg); transform: rotate(5deg); } .lensky .top { position: absolute; top: 0; left: 5px; right: 0; bottom: 50%; } .lensky .top:before { position: absolute; bottom: -50px; left: 0; right: 0; } .lensky .bottom { position: absolute; top: 50%; left: 0; right: 5px; bottom: 0; } .lensky .bottom:before { position: absolute; top: -50px; left: 0; right: 0; }

Моё мнение такое,- что выглядит это как-то криворуко, можно ли как то это улучшить или сделать более красиво ?

Ответ

С помощью clip-path так:
.gorlachev { text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25); font: 62px arial; position: relative; display:inline-block; } .gorlachev:before, .gorlachev:after { content: attr(title); clip-path: polygon(0 100%, 0 65%, 110% 45%, 110% 100%); } .gorlachev:before { clip-path: polygon(0 65%, 0 0, 100% 0, 110% 45%); /* 110 чтобы тень не перекывала */ position: absolute; padding-left: 2%; }