用CSS制作三角形,替代背景图片(用html和css制作网页)

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

操作方法

  • 01

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

  • 02

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

  • 03

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

  • 04

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

  • 05

    可以看到,三角形变大了,

  • 06

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

  • 07

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

照片如何进行冷色调处理(冷色调插画)
« 上一篇 2024-10-08 17:53
剑三跟宠蟹相获取方法(剑三门派跟宠第六只)
下一篇 » 2024-10-08 17:53