之前写过1篇纯CSS制做带3角的边框，那篇文章内容是用HTML独特标识符来制做3角的，今日详细介绍下，怎样用 border 来制做3角。
html 编码以下：
<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>
css 编码以下：
.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
_border-left: 5px solid white;
_border-right: 5px solid white;
border-bottom: 5px solid black;
overflow:hidden;
}
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
_border-left: 20px solid white;
_border-right: 20px solid white;
border-top: 20px solid #f00;
overflow:hidden;
}
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
_border-top: 60px solid white;
_border-bottom: 60px solid white;
border-left: 60px solid green;
overflow:hidden;
}
.arrow-left {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
_border-top: 10px solid white;
_border-bottom: 10px solid white;
border-right:10px solid blue;
overflow:hidden;
}
实际效果图以下：
检测访问器：chrome，firefox，ie8，ie7，ie6，safari，opera
PS：
1、原文并沒有适配 ie6 访问器，因此我改了下，如今的版本号早已能够适配全部访问器了。
2、相对用 border 来做3角，我更为喜爱用 html 独特标识符来制做3角。
