三角形我们经常用在列表、下拉提示、面包屑导航的位置，给用户以导向的引导作用，比如，在有下拉列表的地方，我们可以用向下的箭头，在列表的时候，我们能告诉用户每个列表项和下一个列表项的关系，当在面包屑导航中，能让用户了解他现在所处的栏目或者频道。我们有哪些方法来实现它呢，下面我根据我们的实际工作中的经验作了简单的总结。

第一种方案，我们可以通过使用背景图片的方式来处理，这也是我们最经常用的方法。
1）单个切出三角形，我们可以根据UI设计的需求，切出与之相适应的图片，比如 ，我们能方便的根据需求，制作不同高度和颜色的三角形。在使用方面，HTML代码和CSS代码相对简单。如下面图是示例：

这种直接使用背景图片的方法适合我们在三角形包含渐变、纹样、肌理等特殊效果的时候，我们可以设置它的颜色来保证图形边缘与背景色完美一致。缺点是我们需要为每个不同的方向需求制作一个图片，增加了http请求和CSS代码的数量。
由于这种方法比较简单,我们就不做演示了.
2）相比之前，我们怎么做到减少http请求，同时也标示出四个方向的三角形呢？我们可以制作一个菱形 ，通过使用CSS的背景定位来选择与之相匹配的形状。这样我们就能用一个图形，达到四个图形的目的。

?

?

?

3）方法二种的方法虽然我们可以实现调用一次背景图片标示四种三角状态的情况，但是在颜色方面确实单一的，我们只能由一种颜色，那我们需要增加三角形同样在激发鼠标悬浮伪类响应的时候，我们应该怎么做呢？比如鼠标悬浮的时候由红色变成橙色？那我们就可以使用这种方法，通过正负形的方法，方法二中的方法我们通过一个正形，那下面的例子我们使用一个负形

HTML文件

?

?<div style="width:100px;height:100px;position:relative;margin:34px;background:#6699FF"> ????<a class="n_a_1"></a> ????<a class="n_a_2" ></a> ???? 免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。 相关资料更多> 求div的align属性的替代方法,该如何处理 DIV显示有关问题， CSS制造Tab菜单样式 css3 keyframes动画片生成工具 应用CSS自动截取字符长度并添加为省略号 网页文字该多大？文字字号详解 css 惯用 命名规则 Android的TextView应用Html来处理图片显示、字体样式、超链接等 css新手上路(4) 推荐阅读更多> html网页播放器编者代码大全 html form 中施用Enctype=multipart/form-data 后request.getParameter获取不到值 望span标签内插入img标签和文字的竖向对齐有关问题 HTML之表单元素“Password”引发的思忖 容易混杂运用位置的XHTML标签 《新视野高校英语（第二版）读写，听说教程3，4》课后习题，听力答案 window.showModalDialog大小疑点，在线 HTML4和HTML5之间主要的不同之处 htmlParse 学习总结 |zyciis| 怎么让一个DIV在小弟我的DIV另一个DIV内的对齐底部 右边距为60px 第二贴 原来的答案不行 多谢 背景图追随界面大小而改变 HtmlAgilityPack 爬虫批量获取百度音乐上载地址一 ExtJs ComboBox 上拉数据较多时，怎么提供模糊搜索 FCKEditor过滤html标签的解决方法 关于css伪种:hover在ie6中的bug 在主页中制造会移动的文字 javascript innerHTML、outerHTML、innerText、outerText的差异 JQuery CSS 步骤说明 紫薇~还记得大明湖畔的HTML5智商拼图吗 safari 怎么替代xmlDOC 的loadXML方法