最近的一个我的项目页面中,有很多三角形 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;
}