原理就是: div 的边框与边框之间的衔接方式是斜角衔接的(注意把width和height都设置为0)
思路：既然是用border做，就得比较粗的才能显示效果，设置div的 height、width为0px，上下左右的border为不同颜色，100px，即
div{
height:0px;?
width:0px;
border-top:100px blue solid;
border-right:100px red solid;
border-bottom:100px green solid;
border-left:100px gray solid;
}
显示如右图效果。
从右图我们可以看到，2个border重叠时，会以45°平分，各显示一半，这样我们如果设上、下、左的边框为白色时，会出现一个红色的三角形。但其实代码可以更简单。
div{
width:0px;
border-top:100px red solid;
border-left:100px white solid;
}
使div的上面（下面）的border为红色，100px实线显示，而左边（右边）用白色与其平分，同时用width：opx控制它们的显示宽度，这样就形成了我们要做的三角形。如下图。
拓展：前天有个用div做十字的题目，用这个三角形的办法再加负margin的方法也得以实现。
html部分：<div class="a1"> </div><div class="a2"> </div><div class="a3"> </div><div class="a4"> </div> （就是写4个div）
css部分：
.a1{
height:50px;?
width:50px;
border-top:30px white solid;
border-right:30px red solid;
border-bottom:30px red solid;
border-left:30px white solid;
}
.a2{
height:50px;
width:50px;
border-top:30px white solid;
border-right:30px white solid;
border-bottom:30px red solid;
border-left:30px red solid;
margin:-110px 0 0 110px;
}
.a3{
height:50px;
width:50px;
border-top:30px red solid;
border-right:30px red solid;
border-bottom:30px white solid;
border-left:30px white solid;
}
.a4{
height:50px;
width:50px;
border-top:30px red solid;
border-right:30px white solid;
border-bottom:30px white solid;
border-left:30px red solid;
margin:-110px 0 0 110px;
}
用border形成其中4分之一的图像，用负margin控制位置，最后拼成全图。
?
?
例子1：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#test4 {
?height:0;
?width:0;
?overflow: hidden;
?font-size: 0;
?line-height: 0;
?border-color:#FF9600 transparent transparent transparent;
?border-style:solid dashed dashed dashed;
?border-width:20px;
}
#test5 {
?width:0;
?height:0;
?overflow:hidden;
?border-color:red green green red;
?border-width:40px;
?border-style:solid
}
</style>
</head>
<body>
<div id="test4"></div>
<div id="test5"></div>
</body>
</html>
?
但是，IE6不支持transparent
?
IE6下, 设置余下三条边的border-style为dashed,即可达到透明的效果~ 具体原因可以见下面“其他小问题”
#test4 { height:0; width:0; overflow: hidden; font-size: 0; line-height: 0; border-color:#FF9600 transparent transparent transparent; border-style:solid dashed dashed dashed; border-width:20px; }
当然, 在IE6下, 不设置透明, 将其颜色设置为背景色, 使其看不出来也是可以的.
?
//??ie6/ie7显示不对的时候，加上overflow:hidden;zoom:1
?
?
其他小问题
border-color: pink; filter: chroma(color=pink);
?