HTML, 用纯CSS画三角形,无需图片,背景颜色可变,大小可变
工具/原料
1
HTML代码
2
CSS代码
方法/步骤
1
首先以DIV做三角形的容器,HTML如图示
2
为对应div加上样式代码,CSS如图所示
3
纯CSS加上HTML就可显示出三角形,无需背景图片,效果如图:
4
同理,通过更改图形的上,下,左,右边框,可以分别得到各个方向的三角形,如图:
5
通过更改边框的大小,可以得到不同大小的三角形,如图:
6
通过更改边框的颜色,可以得到不同颜色的三角形,如图:另外二各生成三角形的方法,如下链接
注意事项
1
边框颜色决定三角形的颜色
2
边框大小决定三角形的大小
3
要同时更改各边框的大小,不然三角形会变形