Увидел на просторах интернета вот такой эффект для текста на 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;
}
<div class="lensky">
<div class="top" title="lensky"></div>
<div class="bottom" title="lensky"></div>
</div>
Моё мнение такое,- что выглядит это как-то криворуко,
можно ли как то это улучшить или сделать более красиво ?
clip-path
, почему его и не использовать в псевдоселекторах? И тогда одним тегом будет идтиclip-path
не будет работать вIE EDGE
, если тебя это не смущает то могу показать как реализовать с помощьюclip-path