为了项目轻量化,一般能用css样式写出来的就不用图片,下面是用css3写常用的三角形
1、上三角
.arrow{
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 80px solid #000;
}
2、下三角
.arrow{
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 80px solid #000;
}
3、左三角
.arrow{
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 80px solid #000;
border-bottom: 50px solid transparent;
}
4、右三角
.arrow{
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 80px solid #000;
border-bottom: 50px solid transparent;
}
5、左上三角
.arrow{
width: 0;
height: 0;
border-top: 80px solid #000;
border-right: 80px solid transparent;
}
6、右上三角
.arrow{
width: 0;
height: 0;
border-top: 80px solid #000;
border-left: 80px solid transparent;
}
7、左下三角
.arrow{
width: 0;
height: 0;
border-bottom: 80px solid #000;
border-right: 80px solid transparent;
}
8、右下三角
.arrow{
width: 0;
height: 0;
border-bottom: 80px solid #000;
border-left: 80px solid transparent;
}
其他实用CSS样式