- 上下左右邊框交界處呈現平滑的斜線。利用這個特點，通過設置不同的上下左右邊框寬度或顏色，可以得到小三角、梯形等。
- 調整寬度大小可以調節三角形形狀。
實現三角形
示例1：
#test1{ height:20px; width:20px; border-color:#FF9600 #3366ff #12ad2a #f0ed7a; border-style:solid; border-width:20px; }
示例2：
在上面的基礎上，把高度寬度都設為0時，會呈現邊界斜線。
#test2 { height:0; width:0; overflow: hidden; /* 這里設置overflow, font-size, line-height */ font-size: 0; /*是因為, 雖然寬高度為0, 但在IE6下會具有默認的 */ line-height: 0; /* 字體大小和行高, 導致盒子呈現被撐開的長矩形 */ border-color:#FF9600 #3366ff #12ad2a #f0eb7a; border-style:solid; border-width:20px; }
示例3：
示例2中可以看到有4個三角形了，如果把4種顏色，只保留一種顏色，余下3種顏色設置為透明或者與背景色相同，那就形成一個三角形。
#test3 { height:0; width:0; overflow: hidden; font-size: 0; line-height: 0; border-color:#FF9600 transparent transparent transparent; border-style:solid; border-width:20px; }
示例4：
示例3中，在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; }
示例5：
上述畫的小三角的斜邊都是依靠原來盒子的邊，還有另一種形式的小三角，斜邊在盒子的對角線上。
#test5 { height:0; width:0; overflow: hidden; font-size: 0; line-height: 0; border-color:#FF9600 #3366ff transparent transparent; border-style:solid solid dashed dashed; border-width:40px 40px 0 0 ; }
保留其中一種顏色，就可以得到斜邊在對角線上的三角形了。
實現圓角效果
可以實現近似圓角，其實是一個非常小的梯形展示出來的。
<!DOCTYPE HTML> <html> <head> <style type="text/css"> .test{width:200px;height:50px;} .test .top{width:194px;border-color:transparent transparent #FF9600 transparent;*border-color:pink pink #FF9600 pink;border-style:dashed dashed solid dashed;border-width:3px;filter:chroma(color=pink);} .test .center{width:200px;height:40px;background-color:#FF9600;} .test .bottom{width:194px;height:5px;border-color:#FF9600 transparent transparent transparent;*border-color:#FF9600 pink pink pink;border-style:solid dashed dashed dashed;border-width:3px;filter:chroma(color=pink);} </style> </head> <body> <div class="test"> <div class="top"> </div> <div class="center"></div> <div class="bottom"> </div> </div> </body> </html>