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