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>
css3写三角形（为了好区分姑且按方向区别）：
（1）上三角形：
border: 16px solid transparent
border-bottom: 16px solid #f00
width: 0
height: 0
（2）下三角形：
border: 16px solid transparent
border-top: 16px solid #f00
width: 0
height: 0
（3）右三角形：
border: 16px solid transparent
border-left: 16px solid #f00
width: 0
height: 0
（4）左三角形：
border: 16px solid transparent
border-right: 16px solid #f00
width: 0
height: 0
宽度或高度等于0（取决于朝哪个方向的箭头） ，border只有一条边显示，其他边隐藏，比如
width: 0height: 0
border: 10px solid transparent
border-top-color: #000
如果想旋转可以用transform来实现
