我们通过不许列表来完成这个项目。
li中间添加链接元素，可以实现点击跳转到效果。
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>CSS iSOmetric </title> </head> <body> <ul> <li style="--i:6"><a href="#">关于</a></li> <li style="--i:5"><a href="#">端午节</a></li> <li style="--i:4"><a href="#">起源</a></li> <li style="--i:3"><a href="#">故事</a></li> <li style="--i:2"><a href="#">风俗</a></li> <li style="--i:1"><a href="#">更多</a></li> </ul> </body> </html>
CSS
*{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Oswald',sans-serif; } body{ display: flex; justify-content: left; align-items: center; min-height: 100vh; font-size: large; font-family: 'Courier New', Courier, monospace; } ul{ position: relative; transform: skewY(-5deg); } ul li{ position: relative; list-style: none; width: 150px; height: 85px; background: #ecbad6; padding: 15px; z-index: var(--i); transform: 0.5s; } ul li:hover{ background: #33a3ee; transform: translateX(45px); } ul li::before{ content: ''; position: absolute; top:0; left:-40px; width: 40px; height: 100%; background: #6eb8e9; transform-origin: right; transform: skewY(45deg); transform: 0.5s; } ul li:hover::before{ background: #2982b9; } ul li::after{ content: ''; position:absolute; top:-40px; left: 0; width: 100%; height: 40px; background: #ecbad6; transform-origin: bottom; transform: skewX(45deg); transform: 0.5s; } ul li:hover::after{ background: #2982b9; } ul li a{ text-decoration: none; color: rgb(255, 255, 255); display: block; text-transform: uppercase; letter-spacing: 0.05em; transform: 5s; } ul li:hover a{ color: rgb(0, 0, 0); } ul li:last-child::after{ box-shadow: -85px 150px 20px rgb(0, 0,0,0.25); }
