css之border做三角形

边框border：
border:width style color; (值没有顺序，空格分开)
width:1px;
color: red
style:solid实线,dashed虚线,dotted点画线(IE6不兼容dotted,);

div{
border:1px solid red;
border-top-color:black;  //当只改变边框的一个值时可以这样写
border-bottom-width:
border-left-style:
    }

border-top上边框; border-right右边框;
border-bottom下边框; border-left左边框

边框的形状：非矩形，取决于容器的大小，即宽高。可以利用边框特性做三角形。
上边是一个矩形

div {
  width: 400px;
height: 400px;
border: 20px solid red;
border-top-color: black;
}   

三角形

div {
width: 0;
height: 0;
border: 10px solid #fff;           // 边框是白色
border-top-color: #ccc;           //三角是灰色,10px,三角朝下
}

div {
width: 0;
height: 0;
border: 10px solid #fff;           // 边框是白色
border-left-color: #ccc;          //三角是灰色,10px,三角朝右
}

div {
width: 0;
height: 0;
border: 10px solid #fff;           // 边框是白色
border-bottom-color: #ccc;     //三角是灰色,10px,三角朝上 
}

div {
width: 0;
height: 0;
border: 10px solid #fff;           // 边框是白色
border-right-color: #ccc;        //三角是灰色,10px,三角朝左 
}