梯形：
由此可见，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和方向来画出自己想要的三角形
用不着css3，不用一句js代码，甚至不要css都行...1.首先，新建 html 文件
2.用记事本或编辑器打开 html 文件，往 body 区内插入图片<img src="图片地址" />
3.保存 html 文件，用你喜欢的浏览器打开这个网页
4.css 定义 img{border: none} 图片默认的边框很丑，影响效果，先去掉
5.请找到你显示器上有一个进参数设置界面的按钮(应该会有很多按钮，多试试就能找到)
6.按下按钮，里面有个梯形校正选项，可能是英文或类似的名称
7.尝试给梯形校正选项设置一个很大的值
8.如果上面你都做对了，会成功获得一个梯形效果
9.Now enjoy it! Cheers...
.t{
width:100px
height:50px
margin: 50px
text-align:center
color:#fff
line-height:50px
background-color:red
position:relative
}
.t:before{
content:''
display:block
width:35px
height:50px
position:absolute
transform:skewX(-30deg)
background:red
border-top-left-radius:8px
left:-20px
top:0
}
.t:after{
content:''
display:block
width:35px
height:50px
position:absolute
transform:skewX(30deg)
background:red
border-top-right-radius:8px
top:0
right:-20px
}
利用before和after来做两个斜边部分，利用skew来倾斜，利用定位来处理位置，
我看到图中主要是两边顶部有圆角，那么再利用border-radius来调整
