平行四边形、梯形导航条

最新推荐文章于 2024-10-10 16:29:15 发布

原创最新推荐文章于 2024-10-10 16:29:15 发布 · 1.3k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#导航条

css3 专栏收录该内容

40 篇文章

订阅专栏

本文介绍如何使用CSS实现平行四边形和梯形的导航菜单效果，包括:hover状态的变化，并讲解了transform-origin属性的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

平行四边形

效果如图：

hover 的效果如图：

代码如下：

<div class="keith">
        <ul>
            <li>导航条</li>
            <li>首页</li>
            <li>呼呼呼</li>
            <li>嘻嘻嘻</li>
            <li>设置</li>
            <li>个人中心</li>
        </ul>
</div>

.keith li {
  position: relative;
  float:left;
  margin-left:2px;
  color:#fff;
  text-decoration: none;
  list-style:none;
  padding:5px 10px;
}
.keith li::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: -1;
  background: #069e06;
  -moz-transform: skewX(-25deg);
  -ms-transform: skewX(-25deg);
  -webkit-transform: skewX(-25deg);
  transform: skewX(-25deg);
}
.keith li:hover::after {
  background: #0ee80e;
}

梯形

用于控制梯形是左倾斜还是右倾斜的属性是transform-origin。梯形不倾斜：bottom。左倾斜：bottom left；右倾斜：bottom right。

效果如图：

hover:效果：

代码如下：

<div class="keith">
  <ul>
     <li >导航条</li>
     <li >首页</li>
    <li>呼呼呼</li>
    <li >嘻嘻嘻</li>
     <li >设置</li>
    <li >个人中心</li>
        </ul>
</div>

.keith li {
  position: relative;
  float:left;
  margin-left:-10px;
  color:#fff;
  text-decoration: none;
  list-style:none;
  padding:10px 15px 5px 15px;
  
}
.keith li::after {
  content: '';
  border:2px solid #fff;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  background: #069e06;
  -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 ;
}
.keith li:hover::after {
  background: #0ee80e;
}