原文地址：https://segmentfault.com/a/1190000015020964
感想：简简单单的动画特效，位置，动画。
HTML代码：
<nav> ???<ul> ???????<li>Home</li> ???????<li>Products</li> ???????<li>Services</li> ???????<li>Contact</li> ???</ul></nav><nav> ???<ul> ???????<li>Home</li> ???????<li>Products</li> ???????<li>Services</li> ???????<li>Contact</li> ???</ul></nav><nav> ???<ul> ???????<li>Home</li> ???????<li>Products</li> ???????<li>Services</li> ???????<li>Contact</li> ???</ul></nav>
CSS代码：
html, body { ???margin: 0; ???padding: 0; ???width: 100%; ???height: 100%; ???display: flex; ???justify-content: center; ???align-items: center;}nav{ ???--h: 3em;}nav:nth-child(1){ ???--rate: 1.5; ???--bgcolor: black;}nav:nth-child(2){ ???--rate: 1.732; ???--bgcolor: brown;}nav:nth-child(3){ ???--rate: 2; ???--bgcolor: green;}nav ul{ ???padding: 0;}nav ul li{ ???position: relative; ???list-style-type: none; ???width: calc(var(--h) * var(--rate)); ???height: var(--h); ???line-height: var(--h); ???margin: 2em; ???background-color: var(--bgcolor); ???color: white; ???font-family: sans-serif; ???text-align: center;}/* 用伪元素增加2个倾斜的矩形 */nav ul li::before,nav ul li::after{ ???position: absolute; ???top: 0; ???left: 0; ???content: ‘‘; ???/* inherit : 继承 */ ???width: inherit; ???height: inherit; ???background-color: var(--bgcolor); ???z-index: -1; ???filter: opacity(0); ???transition: 0.3s;}nav ul li::before{ ???/* 角度 位置 */ ???transform: rotate(60deg) translateX(calc(var(--h) * -2));}nav ul li::after{ ???transform: rotate(-60deg) translateX(calc(var(--h) * 2));}nav ul li:hover::before{ ???filter: opacity(1); ???transform: rotate(60deg) translateX(0);}nav ul li:hover::after{ ???filter: opacity(1); ???transform: rotate(-60deg) translateX(0);}32.纯 CSS 创作六边形按钮特效
原文地址：https://www.cnblogs.com/FlyingLiao/p/10340137.html