在我们制作网页时，例如导航等，会遇到很多的一些小图标，这里以京东的小三角
（如下图） 举例，来介绍常用的一些方法。

方法一：也是比较简单的一种方法。用background 来做，
一般用一个行内标签如 i ，s 等 先转换 显示方式 display：block；，然后设置宽高。

如果不是单一的图片，而是精灵图，则应该设置background-position 属性

方法二：我认为是一种比较有技巧性的方法，老版jd就这么玩的。

具体来说就是 用两个标签 父标签控制图标的位置 ，子标签里是一个菱形依靠定位来展示大小
和方向，父标签第二作用是依靠overflow：hidden；截掉子标签超出的部分。是不是很巧妙。

代码如下：

 1    
22  
23  
24      
25         ◇ 
26      
27 

文章题目：常见的小图标制作几种方法
分享地址：http://www.pwwzsj.com/view/172654.html