css3 border怎么就可以画图了 - 快车库

一直没有在意border，众所周知border就是边框，大概就是定义一个宽度，样式，颜色。就可以了，最大的作用可能就是美观了。最近发现，其实还有一个重要的作用--画图.
在谈及这个功能之前，必须要先明确border到底是怎么形成的.

<div id="newDiv"></div>
#newDiv{
    width:0px;
    height:0px;
    border-left:50px solid pink;
    border-right:50px solid pink;
    border-top:50px solid pink;
    border-bottom:50px solid transparent;
}

形状是 :

要是设置width和height属性的话,即:

<div id="newDiv">border</div>
#newDiv{
    width:45px;
    height:17px;
    border-left:50px solid pink;
    border-right:50px solid pink;
    border-top:50px solid pink;
    border-bottom:50px solid transparent;
}

形状是:

如大家所见，border并不是一个矩形，而是一个三角形或者梯形.

想要让border显示出来，最少要水平方向和垂直方向各一个方向的属性，即border-top或border-bottom中的一个加上border-left或border-right中的一个

有了这个规则之后，大家可以发挥自己的想象力，划出不同的形状,这里转载一篇使用css样式画出不同形状的文章:
穆乙 http://www.cnblogs.com/pigtail/archive/2013/02/17/2914119.html