css 修改三角形大小_css实现三角形

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

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

(1)设置线条宽50px，div 宽高0

.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;

}