网页设计,制作,在早期,一般都是用背景图片来呈现三角形,比如一个提示窗口,有一个三角形图标指示,这个图标一般就是背景图片来的。
现在我们不用背景图片,直接用CSS来生成,需要怎么做呢?
操作方法
-
01
先看下html代码,代码很简单,就是几个div, 我们为其中一个div加上样式名,angle, 这个div就是最终要呈现三角形的。
-
02
然后添加对应的css样式,让div呈现为三角形,代码如图, 把div 长,高(width, height)设置为0, 分别设置左边框,右边框和上边框的样式。
-
03
看下呈现的效果,可以看到,就是一个标准的三角形,
-
04
为什么要用css来制作,而不是背景图片呢,因为用css来制作,可以很容易的改变三角形的大小,背景色。 下面把代码稍稍改一下,
-
05
可以看到,三角形变大了,
-
06
这次把颜色改一下,代码上就是把border的颜色就可以了,是不是很方便?
-
07
下面看一个完整的应用例子,代码,效果如图,