原文地址：https://segmentfault.com/a/1190000014719591
总结：三部分组成，原文透明，左右都与原文重叠（绝对定位），但左右各取相应一部分。
HTML代码：
<html> <head> <link rel="stylesheet" href="index.css"> </head> <body> <div class="text" data-text="BREAK">BREAK</div> </body> </html>
CSS代码：
html, body { margin: 0; padding: 0; height: 100%; display: flex; justify-content: center; align-items: center; } /* */ /* 设置渐变背景色 */ body{ background: linear-gradient(brown, sandybrown); } .text{ font-size: 5em; font-family: "arial black"; position: relative; /* 透明 */ /* color: transparent; */ } /* 利用伪元素增加文字 */ .text::before, .text::after{ content: attr(data-text); /* 使before 和after 内容与text重合 */ position: absolute; top: 0; left: 0; color: lightyellow; transition: 0.2s; } /* 设置左侧文字的遮罩 */ .text::before{ /* background-color: darkgreen; */ /* 图形的四个部分 */ clip-path: polygon(0 0, 60% 0, 30% 100%, 0 100%); } /* 设置右侧文字的遮罩 */ .text::after { /*background-color: darkblue; */ clip-path: polygon(60% 0, 100% 0, 100% 100%, 30% 100%); } .text:hover::before { /* 当鼠标划过时，遮罩的文字分别向两侧偏移 */ left: -0.15em; /* 两侧文字增加歪斜效果 */ transform: rotate(-5deg); /* 微调文字的高度 */ top: -0.05em; } .text:hover::after { left: 0.15em; transform: rotate(5deg); top: 0.05em; }