梯形图案
看下面这段样式：
.test{width:10px; height:10px; border:10px solid; border-color:#ff3300 #0000ff #339966 #00ff00;}
当某个div应用了上面这个样式后，结果会如何？见下图（截自Firefox3.5，IE浏览器有细节上的差异）：
更进一步 – 部分边框透明
现在，设想一下，如果我们现在只保留一个一个上边框，其余边框均transparent透明（或与背景色同色），那么是不是就只显示一个上面红色的边框了，我们测试下，与上面类似的代码，只是修改下其余三个边框的颜色。
.test{width:10px; height:10px; border:10px solid; border-color:#ff3300 #ffffff #ffffff #ffffff;}
结果如下图（截自Firefox3.5）：
得到的是一个梯形。
从梯形到三角
上面的是梯形，我要想得到一个三角图案该怎么办呢？显然，很简单，把div的高宽都变成0，只留一边，不就是三角了吗？如下代码：
.test{width:0; height:0; border:10px solid; border-color:#ff3300 #ffffff #ffffff #ffffff;}
结果如下（依旧截图自Firefox3.5）：
从等腰直角三角形到普通等腰三角
上图为等腰直角三角形，之所以为等腰直角，是因为所有的边框宽度是一样的，如果我们将边框宽度设置为不同，那会怎样？则会形成等腰三角形。如下代码：
.test{width:0; height:0; border-width:20px 10px; border-style:solid; border-color:#ff3300 #ffffff #ffffff #ffffff;}
得到的结果如下图：
从等腰到不等腰
我们可以不局限于保留一条边框，我们可以保留两条，于是我们可以告别等腰，得到更加锐利的三角，正如一开始所展示的那个三角：
.test{width:0; height:0; border-width:20px 10px; border-style:solid; border-color:#ff3300 #ff3300 #ffffff #ffffff;}
说明：
以上的测试代码纯粹为了说明原理，所以使用#ffffff白色边框，通过于背景融合来隐藏边框。在实际的操作中，应该使用transparent透明属性，例如border-color:#ff3300 #ff3300 transparent transparent;，这同样会有问题，IE6浏览器不支持transparent透明属性，不过没有关系，就border生成三角技术而言，直接设置对应的透明边框的border-style属性为dotted或是dashed即可解决这一问题，为什么使用dotted和dashed可以修复此问题呢？您有兴趣可以参见默尘的这篇文章Dotted&Dashed终极分析及IE6透明边框。