有趣的border图标

    前段时间做了360的校招笔试，被一道UI题卡住了。题目要求用纯html和css绘制如下的图案，当时没有很好的想法，最后用canvas做了一个，然后就挂了~~~

                                                                  

360给出的标准答案是用border结合css3旋转来构成上面的图案（相关代码：warning图案代码）

    border属性我们在平时的项目中经常会用到，但大多是作为一个div边框的形式来呈现，很少用它来绘制相关图案，所以这里我们主要讲一些border有趣的用法，然后在看看它的‘构图原理’是怎样的。首先我们使用border来绘制三角形。

                                                         

实现代码：

//css
#container{
			width: 0;
			height: 0;
			border-top: 100px solid rgb(66,133,244);
			border-left: 100px solid transparent;
			border-right: 100px solid transparent;
			border-bottom: 100px solid transparent;
		}
//html
<div id="container"></div>

可以看到，实现上面这个简单的三角形，就是通过设置四边的border-width值，并让其中一个方向的边框有给定颜色，其他边框颜色设为透明就可以了。看到这里，你可能会想为什么它会构成三角形呢？我们通过一些测试看看浏览器到底是如何解析这个border的：

//css
#container{
			width: 100px;
			height: 100px;
			border-top: 50px solid rgb(66,133,244);
			border-left: 50px solid rgb(255,206,68);
			border-right: 50px solid rgb(255,206,68);
			border-bottom: 50px solid rgb(66,133,244);
		}
//html
<div id="container"></div>

上