css表示导航栏当前活动状态的箭头的几种方法

例如lofter导航栏的箭头：

方法：用一个块，宽高设置为0，再设置框的宽度（border）需要箭头向上时候，就设置下边框宽度，其他方向同理，这样便可得到一个箭头形状的小块，再设置颜色位置即可。

<i class="arrow"></i>

.arrow{
    display:inline-block;
    width:0;
    height:0;
    border:5px solid transparent;
    border-top:none;
    border-bottom-color:#FFF;
}

接下来讲箭头线条而并非箭头块：可以使用before和after伪元素来设置，这里就要用到两个伪元素块。也是通过设置他们的框宽差异来实现，

<div id="test"></div>

#test{
        height: 100px;
        width: 100px;
        border: 2px solid #000;
        position: relative;
      }
      #test:before,#test:after{
        border: solid transparent;
        content: ' ';
        height: 0;
        left: 100%;
        position: absolute;
        width: 0;
      }
      #test:after{
        border-width: 10px;
        border-left-color: #fff;
        top: 20px;
      }
      #test:before{
        border-width: 12px;
        border-left-color: #000;
        top: 18px;
      }

箭头向右时如上代码；箭头向左时right:100%;before和after的boder-left-color改为boder-right-color；

如果需要箭头为上下方向则可以用两个i标签，用大的i标签包含小的i标签通过颜色差异显示出来；代码如下：

<div id="test"><i class="arrow"><i class="arrow2"></i></i></div>

#test{
        /*background-color: green;*/
        height: 100px;
        width: 100px;
        border: 2px solid #000;
        position: relative;
      }
      #test:before,#test:after{
        border: solid transparent;
        content: ' ';
        height: 0;
        right: 100%;
        position: absolute;
        width: 0;
      }
      #test:after{
        border-width: 10px;
        border-right-color: #fff;
        /*border-left-color: green;*/
        top: 20px;
      }
      #test:before{
        border-width: 12px;
        border-right-color: #000;
      /*  border-left-color: green;*/
        top: 18px;
      }

      .arrow{
        display:inline-block;
        width:0;
        height:0;
        border:12px solid transparent;
        border-top:none;
        border-bottom-color:#000;
        top: -12px;
        position: absolute;
        margin-left: 40%;
      }
      .arrow2{
        display:inline-block;
        width:0;
        height:0;
        border:12px solid transparent;
        border-top:none;
        border-bottom-color:#fff;
        top: 3px;
        right: -12px;
        position: absolute;
      }
      .arrow-down{
        display:inline-block;
        width:0;
        height:0;
        border:12px solid transparent;
        border-bottom:none;
        border-top-color:#000;
        bottom: -12px;
        position: absolute;
        margin-left: 40%;
      }
      .arrow2-down{
        display:inline-block;
        width:0;
        height:0;
        border:12px solid transparent;
        border-bottom:none;
        border-top-color:green;
        bottom: 3px;
        right: -12px;
        position: absolute;
      }

此图的向左箭头是用的伪元素方法，向上的箭头是用的 i 标签方法。

 

转载于:https://www.cnblogs.com/Decmber/p/5254522.html