原文地址：https://segmentfault.com/a/1190000014836748
感想： 把原元素隐藏，利用伪元素::before 和 ::after 各取上下一半 clip-path 切割图片
HTML代码：
<ul class="menu"> ?<li data-text="New Game">New Game</li> ?<li data-text="Load Game">Load Game</li> ?<li data-text="Options">Options</li> ?<li data-text="Exit">Exit</li></ul>
CSS代码：
html,body { ???margin: 0; ???padding: 0; ???height: 100%; ???display: flex; ???justify-content: center; ???align-items: center; ???background-color: black;}.menu li { ???position: relative; ???list-style-type: none; ???color: transparent; ???font-size: 3em; ???text-transform: uppercase; ???text-align: center; ???line-height: 1em; ???width: 7em; ???margin: 0.5em; ???/* 画出文字的分割线 */ ???border-top: 1px solid transparent; ???transition: 0.3s;}.menu li:hover{ ???border-top: 1px solid yellow;}/* 用伪元素添加文本 */.menu li::before,.menu li::after{ ???position: absolute; ???/* 插入元素的属性值 */ ???content: attr(data-text); ???top: 0; ???left: 0; ???width: 100%; ???color: silver;}/* 把伪元素文本向上移，竖跨分割线 */.menu li::before,.menu li::after { ???top: -0.5em; ???transition: 0.3 ease-out;}/* 用遮罩切出分割线上下二部分的文本 */.menu li::before{ ???clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);}.menu li::after{ ???clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);}.menu li:hover::before,.menu li:hover::after{ ???color: yellow; ???transition: left 0.3s ease-out; ???transition-delay: 0.2s;}.menu li:nth-child(odd):hover::before,.menu li:nth-child(even):hover::after{ ???left: -0.15em;}.menu li:nth-child(even):hover::before,.menu li:nth-child(odd):hover::after{ ???left: 0.15em;}19.纯 CSS 创作一种有削铁如泥感觉的菜单导航特效
原文地址：https://www.cnblogs.com/FlyingLiao/p/10254488.html