关闭→
当前位置:趣知常识网>游戏数码>IT技术>用CSS制作三角形,替代背景图片

用CSS制作三角形,替代背景图片

趣知常识网 人气:2.76W

网页设计,制作,在早期,一般都是用背景图片来呈现三角形,比如一个提示窗口,有一个三角形图标指示,这个图标一般就是背景图片来的。
现在我们不用背景图片,直接用CSS来生成,需要怎么做呢?

用CSS制作三角形,替代背景图片

操作方法

(01)先看下html代码,代码很简单,就是几个div,我们为其中一个div加上样式名,angle, 这个div就是最终要呈现三角形的。

用CSS制作三角形,替代背景图片 第2张

(02)然后添加对应的css样式,让div呈现为三角形,代码如图,把div 长,高(width, height)设置为0,分别设置左边框,右边框和上边框的样式。

用CSS制作三角形,替代背景图片 第3张

(03)看下呈现的效果,可以看到,就是一个标准的三角形,

用CSS制作三角形,替代背景图片 第4张

(04)为什么要用css来制作,而不是背景图片呢,因为用css来制作,可以很容易的改变三角形的大小,背景色。下面把代码稍稍改一下,

用CSS制作三角形,替代背景图片 第5张

(05)可以看到,三角形变大了,

用CSS制作三角形,替代背景图片 第6张

(06)这次把颜色改一下,代码上就是把border的颜色就可以了,是不是很方便?

用CSS制作三角形,替代背景图片 第7张
用CSS制作三角形,替代背景图片 第8张

(07)下面看一个完整的应用例子,代码,效果如图,

用CSS制作三角形,替代背景图片 第9张
用CSS制作三角形,替代背景图片 第10张
TAG标签:#CSS #背景图片 #