通过设置 宽和高为0 ，改变 border-color 属性即可实现三角形效果。
在当前的三角形后面添加一个一个实心三角形，然后将这个三角形绝对定位到当前三角行的位置切割。
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>
1、首先创建一个HTML示例文件。2、其次设置一个span元素为块级元素。
3、然后分别设置border的四边都为不同的颜色。
4、最后通过设置上边框和左右边框宽度实现三角形即可。
