前端，小三角，京东实战，静态

怎样在导航栏里的文字后面添加下拉三角（运用代码，不是用那种图片。)

一、导航栏里文字后面的下拉三角 HTML 代码：

<div class="site-nav-send">

送至：北京

<i><s></s></i>

<!--下拉三角的结构-->

</div>

　　为什么要使用代码写下拉菜单的小三角这种小的效果图，而不用图片代替呢？因为代码的执行速度要远快于图片的渲染速度，可提高网页的加载速度。所以一般这样的小效果都运用代码来写。

　　首先先将小三角的格式书写出来，就是在文字的后面加一个菱形，然后编写它的css样式。后续可运用css3让小三角实现旋转效果，这里就不介绍了，本次只制作静态的三角。

　　小三角制作原理图：

前端，小三角，京东实战，静态

使用一大一小两个盒子，大盒子套小盒子，小盒子里装菱形，通过定位将小盒子定位到大盒子中合适的位置，使菱形在大盒子里显示一半，运用 overflow: hidden 将超出的部分清除，这样就只剩下一个向下的三角。再将大盒子定位到文字后面合适的位置即可。

css 代码：

  .site-nav-send {

      padding: 0 25px 0 10px;

    position: relative;

    }

　　　　/*鼠标移动盒子上面，改变背景色*/

    .site-nav-send:hover {

      background-color: #fff; 

    }

　　　　/*大盒子样式*/

    .site-nav-send i {

      position: absolute;

        right: 7px;

        top: 12px;

        width: 15px;

        height: 7px;

        overflow: hidden;

    }

　　　　/*小盒子样式*/

    .site-nav-send s {

      position: absolute;

        top: -7px;

        font: 400 15px/15px "consolas"; 

  }

　　一个网页里一般会有许多的下拉三角，一个一个写太麻烦，这时就可以运用代码复用，即和上面的小三角公用一个css代码。如下：

  .site-nav-send,

  .site-nav-right .fore {

      padding: 0 25px 0 10px;

        position: relative;

    }

    .site-nav-send:hover {

        background-color: #fff;

    }

    .site-nav-send i,

    .fore i {

        position: absolute;

        right: 7px;

      top: 12px;

        width: 15px;

        height: 7px;

        overflow: hidden;

    }

    .site-nav-send s,

    .fore s {

      position: absolute;

        top: -7px;

        font: 400 15px/15px "consolas";

    }

只需将类名添加到后面就行啦。