1.可以用css3的border-radius属性来实现，支持ie9+
<div class="dm"></div>
<div class="dm1">
</div>
<div class="dm2">
</div>
<div class="dm3">
</div>
<div class="dm4">
</div>
<div class="dm5">
</div>
<div class="dm6">
</div>
<div class="dm7">
</div>
<style>
.dm {
width: 0
height: 0
border-left: 50px solid transparent
border-right: 50px solid transparent
border-bottom: 100px solid #00897B
}
.dm1{
width: 0
height: 0
border-left: 50px solid transparent
border-right: 50px solid transparent
border-top: 100px solid #00897Bmargin-top: 20px
}
.dm2{
width: 0
height: 0
border-top: 50px solid transparent
border-right: 100px solid #00897B
border-bottom: 50px solid transparentmargin-top: 20px
}
.dm3{
width: 0
height: 0
border-top: 50px solid transparent
border-left: 100px solid #00897B
border-bottom: 50px solid transparentmargin-top: 20px
}
.dm4{
width: 0
height: 0
border-top: 100px solid #00897B
border-right: 100px solid transparentmargin-top: 20px
}
.dm5{
width: 0
height: 0
border-top: 100px solid #00897B
border-left: 100px solid transparent margin-top: 20px
}
.dm6{
width: 0
height: 0
border-bottom: 100px solid #00897B
border-right: 100px solid transparent
}
.dm7{
width: 0
height: 0
border-bottom: 100px solid #00897B
border-left: 100px solid transparent
}
</style>
首先，我们画一个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和方向来画出自己想要的三角形
