With CSS to cut text? Type a cut text effect or broken font?

Question

I was wanting to create a text to use as a tag <h2> on the site. The idea is that the element continues as a text, I don’t want an image, because I want to keep the text semantic and accessible.

Is there any way to get to any of this result only with CSS?

The idea is to create an effect similar to these of a fractured text, like a word cut only with CSS.

h2 {
  font-family: sans-serif;
  font-weight: 100;
  font-size: 3rem;
  letter-spacing: .25em;
  text-transform: uppercase;
}

<h2>cortado</h2>

Answer 1

Very limited, but still, only with CSS, just use two titles and position a little more to one side, it is important that one of them is 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 edge and the inner edge 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>

Answer 2

It is also possible through the property clip-path CSS. The point is to do the clip inverted between the elements before and after.

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>

This way it is possible to change the background color without problems, as can be seen in Codepen.

Answer 3

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 in codepen