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