关于css: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; 
}