css制作导航栏的上下三角

1）先完成一个导航条

<style type="text/css">
.nav-ul{
    list-style: none;
}
.nav-ul li{
    width: 100px;
    height: 40px;
    border:1px solid #000;
    float: left;
    margin-right: 10px;
    text-align: center;
    line-height: 40px;
}
</style>

<div class="nav">
    <ul class="nav-ul">
        <li>nav1</li>
        <li>nav2</li>
        <li>nav3</li>
    </ul>    
</div>

 

效果如下：

 

2）在每个导航的最右侧做一个  下三角，考虑到代码的简洁性，每个导航条的最右侧加一个伪元素，这个伪元素需要绝对定位，所以li元素需要加上相对定位。

3)那么三角具体怎么做呢？用css，这里用到了border这个属性，当把一个块元素的高和宽都设置为0后，元素是不可见的，而当加上border边框后，元素会有区域了。比如

.template{
    width: 0;
    height: 0;
    border: 50px solid ;
    border-color: #000 #FF0000 #FFFF00 #00FFFF;
}

<div class="template"></div>

 

 

4)要是我们把除了上部，其余三块border的颜色都设置为透明的了，是否就会只显示上部了？

5）继续3）中伪类的编写，

<style type="text/css">
.nav-ul{
    list-style: none;
}
.nav-ul li{
    position: relative;
    width: 100px;
    height: 40px;
    border:1px solid #000;
    float: left;
    margin-right: 10px;
    text-align: center;
    line-height: 40px;
}
.nav-ul li:after{
    width: 0px;
      height: 0px;
      content: "";
     display: block;
      position: absolute;
      right: 10px;
      top: 40%;
      border: 10px solid ;
    border-color: green transparent transparent transparent ;
}
</style>

 

 

6）点击导航条 三角的形状，拉出下拉菜单，然后三角形变为上三角，这里需要点击事件，在点击的导航条上加一个class，class的伪元素是下三角，下三角根据上面的方法，只要将除了下部，其他三部分的颜色设置为透明

的即可。

.nav-ul li.active:after{
    width: 0px;
      height: 0px;
      content: "";
     display: block;
      position: absolute;
      right: 10px;
      top: 16%
      border: 10px solid ;
    border-color: transparent transparent green transparent ;
}
<div class="nav">
    <ul class="nav-ul">
        <li class="active">nav1</li>
        <li>nav2</li>
        <li>nav3</li>
    </ul>    
</div>

 

 

转载于:https://www.cnblogs.com/webWf/p/4719147.html