css实现三角形

最近的一个项目页面中，有很多三角形icon，在不考虑IE兼容性下，使用了css实现三角形，记录一下代码。

1、实心三角形，利用transparent实现

（1）设置线条宽50px，div 宽高0

 <div class="triangle"></div> 
.triangle{   
     width: 0px;   
     height: 0px;   
     border-right: 100px solid red;   
     border-left: 100px solid blue;   
     border-top:100px solid yellow;   
     border-bottom:100px solid green; 
}

（2）当我们只想要一个三角时，只需设置其他boder颜色透明即可。

.triangle{   
    width: 0px;   
    height: 0px;  
    border: 100px solid transparent;   
    border-bottom:100px solid green; 
}

（3）在(2)中我们生成的是一个扁平三角形，可以设置线条的宽度，改变三角形的宽高

.triangle{   
    width: 0px;   
    height: 0px;   
    border: 50px solid transparent;   
    border-bottom:100px solid green; 
}

2、三角形：使用 transform 旋转元素的角度， 在IE中兼容性不好

.triangle{   
    width: 10px;   
    height: 10px;   
    border-left: 1px solid black;   
    border-top: 1px solid black;   
    transform: rotate(45deg); 
}

（2）使用伪类，使两个三角叠加。注：若trianglle 的元素中有文字，可使用before和 after设置三角进行叠加哦

优点：可以修改三角的角度，

.triangle{   
    width: 0px;   
    height: 0px;   
    border: 50px solid transparent;   
    border-bottom: 50px solid black; 
} 
.triangle::after{   
    content: '';  
    width: 0px;   
    height: 0px;   
    border: 49px solid transparent;   
    border-bottom: 49px solid white;   
    position: absolute;   top: 2px;   left: 1px; 
}