用css制作一个三角形箭头
三角形我们经常用在列表、下拉提示、面包屑导航的位置，给用户以导向的引导作用，比如，在有下拉列表的地方，我们可以用向下的箭头，在列表的时候，我们能告诉用户每个列表项和下一个列表项的关系，当在面包屑导航中，能让用户了解他现在所处的栏目或者频道。我们有哪些方法来实现它呢，下面我根据我们的实际工作中的经验作了简单的总结。
第一种方案，我们可以通过使用背景图片的方式来处理，这也是我们最经常用的方法。
1）单个切出三角形，我们可以根据UI设计的需求，切出与之相适应的图片，比如 ，我们能方便的根据需求，制作不同高度和颜色的三角形。在使用方面，HTML代码和CSS代码相对简单。如下面图是示例：
这种直接使用背景图片的方法适合我们在三角形包含渐变、纹样、肌理等特殊效果的时候，我们可以设置它的颜色来保证图形边缘与背景色完美一致。缺点是我们需要为每个不同的方向需求制作一个图片，增加了http请求和CSS代码的数量。
由于这种方法比较简单,我们就不做演示了.
2）相比之前，我们怎么做到减少http请求，同时也标示出四个方向的三角形呢？我们可以制作一个菱形 ，通过使用CSS的背景定位来选择与之相匹配的形状。这样我们就能用一个图形，达到四个图形的目的。
?
?
?<div style="width:100px;height:100px;position:relative;margin:34px;background:#6699FF">相关代码：
?
那个不是等腰三角形的图形，我们也能通过改变边框的宽度来得到：
?
2)通过旋转块状标签角度的方法获得,这种方法需要支持css3属性transform的浏览器支持.
我们经常需要这样的形式:
那我们对这个图形进行分解
那我们先来实现上面分解的图形：
当我们将旋转后的正方形的背景色色值设置为相交盒形相同的色值时,他们就融为一体了.
3)通过◆字符实现.实现方法与上面的类似,将字符的颜色设置为和希望表现得容器相同的颜色,从而得到一个视觉上的三角形.只是这次我们没有用到CSS3的transform属性，兼容性更好一些。
◆◆◆◆代码如下：
?
这种图形的实现我们经常依赖于图形实现，其实我们可以通过border属性，将两个三角型的叠加就可以获得相应的效果：
2）导航状态
我们也可以通过border创造的三角形来实现：标签一标签二标签三标签四
HTML代码：
?
- 首页二级栏目三级栏目可能会比较长四级栏目
?
<title>导航箭头朝上标示符</title><style type="text/css">#menu_liquid{height:30px;margin:20px; list-style:none;font-size:12px;} #menu_liquid li{height:30px;line-height:30px;float:left;white-space:nowrap;} #menu_liquid li a{display:block;float:left;height:30px;position:relative;padding:0 12px;background:#777;color:#fff; text-decoration:none;border-right:1px solid #ccc;} #menu_liquid li a span{display:none;} #menu_liquid li a.current,#menu_liquid li a:hover{ background:#000;color:#0099FF;} #menu_liquid li a.current span,#menu_liquid li a:hover span{display:block;width:0;height:0;border-style:solid;border-color: transparent transparent #f0f0f0 transparent;border-width:0 8px 8px;position:absolute;bottom:0;left:50%;margin-left:-4px;overflow:hidden;z-index:0;} #menu_liquid li a em{display:block;text-align:center;font-style:normal;cursor:pointer;}</style></head><body>????<ul id="menu_liquid">????????<li><a href="#"><span></span><em>首页</em></a></li>????????<li><a href="#"><span></span><em>二级栏目</em></a></li>????????<li><a href="#"><span></span><em>三级栏目可能会比较长</em></a></li>????????<li><a href="#"><span></span><em>四级栏目</em><span></span></a></li>????</ul></body></html>?
这里我们要注意的是什么呢？那就是箭头是绝对定位的，小心箭头过大的时候，将上面的文字覆盖掉了。
上面的只是一些方法的总结，可能并不是最优的方法，最优的实现方法可能还需要具体问题具体分析，就当在此抛砖引玉了。
同时欢迎大家提出相左的看法。