Effet texte coupé CSS (slice effect)

Le code :

<div data-texte="Texte coupé">

<span>Texte coupé</span>

</div>

*,*::after,*::before{box-sizing:border-box}	

[data-texte]{
	
margin: 5rem auto;
display:grid;
grid-template-areas: "slice";
place-items:center;
font-size: clamp(3.05rem, 3.54vw + 2.17rem, 5rem);
font-weight: bold;
letter-spacing: 0.02em;
text-transform: uppercase;
white-space: nowrap;
  
}

[data-texte]>*,
[data-texte]::before{

grid-area:1/1

}	
	
	
[data-texte] span {
  
   clip-path: polygon(0 50%, 100% 40%, 100% 100%, 0% 100%);
   
}

[data-texte]::before{
  
content: attr(data-texte);
margin-left: -0.08em;
clip-path: polygon(0 0, 100% 0, 100% 38%, 0 48%);

}