.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;
}
可以在此两基础上进行控制(宽度等)形成其他图形;
实际应用的场景: