css三角形实现

先看一下效果图：

css的每条边相交的地方，都是三角，将容器的宽高，设置为0，而边框非常粗，并且每条边颜色不同，就能得到图中第一个的效果：

    height: 0;
    position: absolute;
    border-width: 120px;
    border-color: green blue red orange;
    top: 20px;
    left: 200px;
    border-style: dashed solid dashed dashed;

如果只设置一条边的颜色，其他边都设置为透明效果transparent，同时存在两个三角并将它们重叠，第二个相对于第一个偏移就能得到图中第二个的效果：

<div style="position: absolute;top: 20px;
   left: 300px">
   <div style=" width: 0;
   height: 0;
   position: absolute;
   border-width: 120px;
   border-color: transparent transparent red transparent;
   top: 20px;
   left: 200px;
   border-style: dashed solid dashed dashed;"></div>
   <div style=" width: 0;
   height: 0;
   position: absolute;
   border-width: 120px;
   border-color: transparent transparent  orange transparent;
   top: 26px;
   left: 200px;
   border-style: dashed solid dashed dashed;"></div>
</div>

同理第三个的只要将第二个种的三角颜色改为背景色即可:

<div style="position: absolute;top: 20px;
    left: 600px">
    <div style=" width: 0;
    height: 0;
    position: absolute;
    border-width: 120px;
    border-color: transparent transparent red transparent;
    top: 20px;
    left: 200px;
    border-style: dashed solid dashed dashed;"></div>
    <div style=" width: 0;
    height: 0;
    position: absolute;
    border-width: 120px;
    border-color: transparent transparent  white transparent;
    top: 26px;
    left: 200px;
    border-style: dashed solid dashed dashed;"></div>
</div>