css 3 绘画,css3 border怎么就可以画图了

一直没有在意border，众所周知border就是边框，大概就是定义一个宽度，样式，颜色。就可以了，最大的作用可能就是美观了。最近发现，其实还有一个重要的作用--画图.

在谈及这个功能之前，必须要先明确border到底是怎么形成的.

#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属性的话,即:

border

#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中的一个