原文地址：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:;
padding:;
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:;
left:;
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;
}