border-color的深入理解

.className{
    width:100px;height:100px;
    border:100px solid;
    border-color: red green blue orange;
}

最终的效果如下：

以上演示浏览器对 border-color 的渲染。

由此，我们就可以制作梯形、三角形的图标。

例如：

　　梯形的代码：

.className{
    width:100px;height:100px;
    border:100px solid;
    border-color: red transparent transparent transparent;  /*transparent 表示透明*/
}

　　三角形的代码：

.className{  /*等腰*/
    border:100px solid;
    border-color: red transparent transparent transparent; 
}

.className{ /*直角*/
    border:100px solid;
    border-color: red red transparent transparent;  
}

　　　可以在此两基础上进行控制（宽度等）形成其他图形；

 

 

实际应用的场景：