web前端基础学习笔记（19）之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;  
}

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

 

 

实际应用的场景：

例子：小三角

.con::before {
        content: "";
        width: 0;
        height: 0;
        position: absolute;
        top: 28px;
        left: 18px;
        border: 8px solid #000;
        border-color: red transparent transparent;
      }