I was wanting to create a text to use as <h2> in the site, I wanted the form of text to be maintained I do not want an image, because I want to keep the text semantic and accessible.
Is there any way to get this result with CSS only?
The idea is to create an effect similar to the following:
h2 {
font-family: sans-serif;
font-weight: 100;
font-size: 3rem;
letter-spacing: .25em;
text-transform: uppercase;
}<h2>cortado</h2>Very limited, but still only with CSS, just use two titles and position one a little more to one side, it is important that one of them stay on top with a smaller height and white background
h2[cortado], h2[cortado]::before {
padding-left: 5px;
font-family: sans-serif;
font-weight: 100;
font-size: 3rem;
letter-spacing: .25em;
text-transform: uppercase;
position: absolute;
top: 0;
left: 0;
}
h2[cortado] {
z-index: 2;
}
h2[cortado]::before {
content: attr(cortado);
transform: translateX(3.5px);
height: 30px;
background-color: white;
overflow: hidden;
z-index: 2;
}<h2 cortado="cortado">cortado</h2> Only with the attribute without having to repeat in HTML using ::after and ::before , you can also use the border and inner margin to give a distance effect between the bottom and top
h2[cortado]::after, h2[cortado]::before {
padding-left: 3.5px;
font-family: sans-serif;
font-weight: 100;
font-size: 3rem;
letter-spacing: .25em;
text-transform: uppercase;
position: absolute;
top: 0;
left: 0;
content: attr(cortado);
}
h2[cortado]::after {
z-index: 1;
}
h2[cortado]::before {
transform: translateX(3.5px);
height: 25px;
background-color: white;
overflow: hidden;
z-index: 2;
border-bottom: 3px solid white;
padding-bottom: 3px;
}<h2 cortado="exemplo"></h2> It is also possible through the clip-path property of CSS. The question is just to make the clip reversed between the before and after elements.
h1 {
font-size: 5rem;
}
[slashed] {
text-transform: uppercase;
position: relative;
}
[slashed]:before, [slashed]:after {
content: attr(title);
text-transform: uppercase;
position: absolute;
top: .2rem;
}
[slashed]:before {
clip-path: polygon(0 54%, 100% 24%, 100% 0, 0 0);
}
[slashed]:after {
left: .2rem;
clip-path: polygon(0 54%, 100% 24%, 100% 100%, 0% 100%);
}<h1 slashed title="Cortado"></h1>In this way you can change the background color without any problems, as can be seen in the CodePen .
I believe this is what you need:
html,
body {
height: 100%;
overflow: hidden;
}
body {
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
transform: rotate(-5deg);
background: blue;
}
.slashed {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-shadow: 3px 3px 3px rgba(0,0,0,0.5);
}
.slashed .top,
.slashed .bot {
text-align: center;
font: 62px/100px arial;
text-transform: uppercase;
text-align: center;
overflow: hidden;
color: #fff;
}
.slashed .top:before,
.slashed .bot:before {
content: attr(title);
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-ms-transform: rotate(5deg);
transform: rotate(5deg);
}
.slashed .top {
position: absolute;
top: 0;
left: 5px;
right: 0;
bottom: 50%;
}
.slashed .top:before {
position: absolute;
bottom: -50px;
left: 0;
right: 0;
}
.slashed .bot {
position: absolute;
top: 50%;
left: 0;
right: 5px;
bottom: 0;
}
.slashed .bot:before {
position: absolute;
top: -50px;
left: 0;
right: 0;
}<div class="slashed">
<div class="top" title="Cortado"></div>
<div class="bot" title="Cortado"></div>
</div>as seen at codepen