多语言展示
当前在线:1965今日阅读:167今日分享:16

无需图片纯CSS三角形,大小,颜色可变

HTML, 用纯CSS画三角形,无需图片,背景颜色可变,大小可变
工具/原料
1

HTML代码

2

CSS代码

方法/步骤
1

首先以DIV做三角形的容器,HTML如图示

2

为对应div加上样式代码,CSS如图所示

3

纯CSS加上HTML就可显示出三角形,无需背景图片,效果如图:

4

同理,通过更改图形的上,下,左,右边框,可以分别得到各个方向的三角形,如图:

5

通过更改边框的大小,可以得到不同大小的三角形,如图:

6

通过更改边框的颜色,可以得到不同颜色的三角形,如图:另外二各生成三角形的方法,如下链接

注意事项
1

边框颜色决定三角形的颜色

2

边框大小决定三角形的大小

3

要同时更改各边框的大小,不然三角形会变形

推荐信息