在平时的开发中我们经常要使用到小三角，我们除了使用切出来的图案，还有其他方式来实现这个小三角吗？答案是肯定的，只要通过border这个css属性就可以简单实现啦。


下面让我们一步步来看下是如何实现的。


首先我们来看如下代码

<styletype="text/css">.triangle_test{width:50px;height:50px;border-width:15px;border-color:redgreenblackblue;border-style:solid;}.triangle_test1{width:100px;height:100px;border-width:15px;border-color:redgreenblackblue;border-style:solid;}</style><body><divclass="triangle_test"></div><p><spanclass="triangle_test1"></span><sclass="triangle_test1"></s></p></body>

显示结果：


但是如果我们把width 和heigth设置成为0那又变成啥了？

看图可知，对于行内元素width和heigth并不起效果的，所以在triangle_test1中我们需要使用到

font-size:0这个css属性来设置行内元素的高度.

.triangle_test1{width:0;height:0;border-width:15px;border-color:redgreenblackblue;border-style:solid;font-size:0;}

到这一步我们就应该知道三角形该怎么实现了吧。

有人说那我只设置border-top的属性，只让踏一个显示不就好了么？真的是这样吗？

然而事实是这样并不能实现。这里通过一个小例子来解释

1.1 设置相邻边框可见

.triangle_1{width:100px;height:100px;border-width:20px;/*20px00;*/border-style:solid;border-color:redgreenblueblack;}

显示出来是这样子的，红色边框显示为梯形

.triangle_1{width:100px;height:100px;border-width:20px20px00;/*这里有修改*/border-style:solid;border-color:redgreenblueblack;}

看到了吗，红色并不是显示为梯形，黑色不显示的话，他会把部分红色区域覆盖，规律一看就知。


所以使另外三边变为透明即可实现小三角。


2.设置边框颜色透明度

.triangle2{/*兼容各个浏览器*/width:0;height:0;border-width:10px;border-style:solid;/*dasheddasheddashed/*border-color:redtransparenttransparenttransparent;font-size:0;}

但是这个就会导致不能兼容ie6以下的浏览器，因为不识别transparent属性。


所以这里用到了一个ie6以下浏览器的特点就是border-style:dashed这个属性

可以参考文章http://it.chinawin.net/application/article-180df.html


所以最终的结果为

.triangle2{/*兼容各个浏览器*/width:0;height:0;border-width:10px;border-style:soliddasheddasheddashed;border-color:redtransparenttransparenttransparent;font-size:0;}

--------------------------------------------------------------------------------

以上只有上下左右三角的画法，接下来我们简单说下左上角三角的画法

这里就可以用到上述文中1.1中的样式

.triangle_1{width:0;//将width和heigth设置为0height:0;border-width:20px20px00;border-style:solid;border-color:redgreenblueblack;}

这样我们只要设置border-style:solid dashed dasheddashed;

border-color:red transparenttransparenttransparent;即可得到红色的左上箭头