5.15日音讯,网页中border三角知识详解。利用CSS的border属性可以生成一些图形，例如三角或是圆角。一、前言
利用CSS的border属性可以生成一些图形，例如三角或是圆角。纯粹的CSS2的内容，没有兼容性的问题，我之前在纯CSS实现各类气球泡泡对话框效果一文中算是比较详细的讲述了CSSborder属性生成三角的原理，以及实例。我觉得此技术相当实用的，故本文再次简单叙述一下，另外，本文还将展示可能并不为众人所知的CSSborder圆角生成技术。好了，裹脚布的话就不说了，直接进入正题。
二、CSSborder生成三角技术简介
效果抢鲜
下图为使用CSS的border属性实现的三角效果：
复制代码代码如下:.test{width:0;height:0;border-width:20px10px;border-style:solid;border-color:#ff3300#ff3300#ffffff#ffffff;}
如何实现的，为何会有这样的效果，不急，takeiteasy!
梯形图案
看下面这段样式：
复制代码代码如下:.test{width:10px;height:10px;border:10pxsolid;border-color:#ff3300#0000ff#339966#00ff00;}
当某个div应用了上面这个样式后，结果会如何？见下图（截自Firefox3.5，IE浏览器有细节上的差异）：
更进一步–部分边框透明
现在，设想一下，如果我们现在只保留一个一个上边框，其余边框均transparent透明（或与背景色同色），那么是不是就只显示一个上面红色的边框了，我们测试下，与上面类似的代码，只是修改下其余三个边框的颜色。
复制代码代码如下:.test{width:10px;height:10px;border:10pxsolid;border-color:#ff3300#ffffff#ffffff#ffffff;}
结果如下图（截自Firefox3.5）：
得到的是一个梯形。
从梯形到三角
上面的是梯形，我要想得到一个三角图案该怎么办呢？显然，很简单，把div的高宽都变成0，只留一边，不就是三角了吗？如下代码：
复制代码代码如下:.test{width:0;height:0;border:10pxsolid;border-color:#ff3300#ffffff#ffffff#ffffff;}
结果如下（依旧截图自Firefox3.5）：
从等腰直角三角形到普通等腰三角
上图为等腰直角三角形，之所以为等腰直角，是因为所有的边框宽度是一样的，如果我们将边框宽度设置为不同，那会怎样？则会形成等腰三角形。如下代码：
复制代码代码如下:.test{width:0;height:0;border-width:20px10px;border-style:solid;border-color:#ff3300#ffffff#ffffff#ffffff;}
得到的结果如下图：
从等腰到不等腰
我们可以不局限于保留一条边框，我们可以保留两条，于是我们可以告别等腰，得到更加锐利的三角，正如一开始所展示的那个三角：
复制代码代码如下:.test{width:0;height:0;border-width:20px10px;border-style:solid;border-color:#ff3300#ff3300#ffffff#ffffff;}
