如何用css绘制一个三角形？一般来讲，边框被认为是包裹元素的线条，当线条有宽度的时候，它就成为了一个平面。那么，单条边框是什么形状的呢？
【例】创建一个长度和宽度都为100px的正方形，设置10px的棕色实线边框，浏览器显示效果如图1所示，CSS代码如下。
.box{
width:200px;
height:200px;
border:20px solid #c9aa8b;
}
图1 创建一个正方形
为了清楚看到一条边框的形状，将上边框的颜色改为黄色，浏览器显示效果如图2所示。CSS代码如下。
border-top-color:#8a660f;
图2 将上边框的颜色改为黄色
从图2可以清晰地看到，当元素的长度和宽度不为0时，元素的上边框呈现为梯形。由此可知，当元素的长度和宽度不为0时，边框的形状是梯形。
那么，当元素的长度和宽度都为0时，边框的形状还是梯形吗？将元素的长度和宽度设为0，CSS代码如下。
.box{
width:0px;
height:0px;
border:20px solid #c9aa8b;
border-top-color:#ffc86b;
}
浏览器显示效果如图3所示，当元素的长度和宽度均为0时，元素的上边框是一个朝下的三角形。
图3 将元素的长度和宽度设为0
综合上述两种情况，可以得出一个结论：元素的边框是一个非矩形。
利用元素边框的特性，当元素的长度和宽度为0且其他三边的颜色为白色时，使用边框属性，可以得到不同方向的三角形，如图4所示。HTML代码如下。
<div class="box box1"></div> <div class="box box2"></div> <div class="box box3"></div> <div class="box box4"></div>
CSS代码如下。
.box{
width:0px;
height:0px;
border:30px solid #ffffff;
}
.box1{
border-top:30px solid #fbcd5d;
}
.box2{
border-right:30px solid #fbcd5d;
}
.box3{
border-left:30px solid #fbcd5d;
}
.box4{
border-bottom:30px solid #fbcd5d;
}
图4 当元素的长度和宽度为0且其他三边的颜色为白色
