CSS边框并非矩形重叠拼接，而是以梯形无缝拼接。

如下图：

实现代码：

.test1{width:20px;height:20px;border-color:redgreenblueyellow;border-style:solid;border-width:60px60px60px60px;}

如果只给其中两条边设置宽度，则未设置的边依然呈现矩形：

实现代码：

.test1{width:10px;height:20px;border-color:redgreenblueyellow;border-style:solid;border-width:60px60px00;}

利用以上内容，可以利用一个边为彩色，其余边为透明，来显示一个梯形：

实现代码：

.test1{width:30px;height:30px;border-color:transparenttransparentredtransparent;border-style:solid;border-width:60px60px60px60px;}

同理可显示一个三角形：

实现代码：

.test1{width:0px;height:0px;border-color:transparenttransparentredtransparent;border-style:solid;border-width:60px60px60px60px;}

注意：以上实现均使用div（块级元素），如果使用的为行级元素，则可能出现显示不全的问题。