border边框交界处是斜线

border制作三角形状出来的样本。

实现梯形：

.triangle{
    width:100px;height:100px;
    border:100px solid:
    border-color:red green blue orange;
}

实现三角形

.triangle{
    width:0;height:0;
    border:100px solid:
    border-color:red transparent transparent transparent ;
}

梯形：

.triangle{
    width:400px;
    border:100px solid:
    border-color:transparent  transparent red ;
}

border:制作圆角，原理：用上下两个梯形拼接而成，可以兼容ie6，7，8

应用+++++++++++

内容区变成0

+++++++++++++++

++++++++++++

transparent 透明

可用梯形作圆角效果，兼容性好

实现梯形。

实现三角