在矩形的直角，两条边的样式要均分
比如左上角 border-top 和 border-left 的样式要均分
如果border-left 无色透明， border-top有色， 就会出来一个45度的锐角
1、当如下设置代码并赋给div相应的属性时：
#sider2{
width: 100px
height: 100px
border-top: 30px solid #000
border-right: 30px solid #ff0000
border-left: 30px solid #00ff00
border-bottom: 30px solid #0000ff
}
会得到如下的一张图：
2、接着当不设置border-bottom，即默认其为0时，可以得到下面的图片；
3、然后当设置其width为0时，如下图：
4、继续设置其height为0；
5、最后假若你把border-left,border-right设置为透明之后，就可以看到如下的三角形了。
6、这就是设置一个基本的三角形所需要的代码，效果也看起来很直观。
7、还有假如是想实现一个直角三角形，则最后需要两个border边的配合使用，浏览器会自动进行一些“拉伸变换”后就可以得到一个直角三角形。
#triangle-topleft {
width: 0
height: 0
border-top: 100px solid red
border-right: 100px solid transparent
}
首先，我们画一个div，给div加上border，看看盒子模型本来的样子
梯形：
由此可见，css绘制的梯形并不是一个容器，只是容器的一条边。css把容器的其余三条边设置为透明的，只显示需要的一条边，就是一个梯形了。
直角梯形
三角形
盒子模型分为两种，一种是border-box，一种是center-box。低版本的ie中是border-box,在新的浏览器中，我们可以把容器的宽高设计为0或者特地设置box-sizing: border-box。
来看看border-box的效果：
由此可见，当设置为border-box时，border的大小包含在容器大小之内,我们可以通过显示某条边来制作三角形
border-box画直角三角形
center-box:
与border-box一样，可以根据控制border的width和方向来画出自己想要的三角形
