先上效果
🌟 CSS梯形导航是一种打破常规的设计思路，它通过非对称的几何形状为网站带来新颖的视觉体验。本文将指导您如何使用CSS来构建一个梯形导航栏，不仅增强了网页的美学吸引力，还提供了一种新颖的用户交互方式。
完整代码
以下是完整代码：
HTML:
<div class="trapezoid" id="trapezoid"> <ul> <li class="zIndex">Home</li> <li>Blog</li> <li>Source</li> <li>Bookmark</li> <li>About</li> </ul> </div>
CSS代码
ul { list-style: none; } .trapezoid li { position: relative; display: inline-block; width: 100px; height: 50px; line-height: 65px; color: #fff; text-align: center; cursor: pointer; } .zIndex { z-index: 1; } .trapezoid li::after { content: ''; position: absolute; top: 0; bottom: 0; left: -15px; right: -15px; z-index: -1; border-radius: 10px 10px 0 0; border: 1px solid #fff; background: #2175BC; -moz-transform: perspective(0.5em) rotateX(5deg); -ms-transform: perspective(0.5em) rotateX(5deg); -webkit-transform: perspective(0.5em) rotateX(5deg); transform: perspective(0.5em) rotateX(5deg); -moz-transform-origin: bottom; -webkit-transform-origin: bottom; transform-origin: bottom; } .trapezoid li:hover::after { background: #3B9BE5; }
