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

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

操作方法

  • 01

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

  • 02

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

  • 03

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

  • 04

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

  • 05

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

  • 06

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

  • 07

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

赞 (0)

相关推荐

  • 如何通过PS制作马赛克渐变背景图片

    如何通过PS制作马赛克渐变背景图片

    PS是现在十分常用的一款图片编辑软件,有些新用户不知道如何通过PS制作马赛克渐变背景图片,接下来就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步打开电脑中的PS软件,根据下图所示,先依次点击 ...

  • 如何制作金色宣纸背景图片

    ps软件是一款强大的图像处理软件,使用它可以制作很多有意思的图片.那么,如何制作金色宣纸背景图片呢?下面,就让小编给大家介绍一下吧. 操作方法 01 打开ps软件,新建画布. 02 添加云彩滤镜效果. ...

  • 如何制作海绵质地背景图片

    如何制作海绵质地背景图片呢?下面,就让小编给大家介绍一下吧. 操作方法 01 首先,我们打开ps软件:然后新建一个画布. 02 建好画布之后,我们新建一个空白图层. 03 接着,给空白图层填充50%灰 ...

  • 如何制作葡萄纹理背景图片

    如何制作葡萄纹理背景图片呢?下面,就让小编给大家介绍一下吧. 操作方法 01 首先,我们需要打开我们电脑的ps软件(鼠标左键双击桌面上的ps快捷方式或者是鼠标右键再选择打开都是可以的). 02 打开p ...

  • 怎么制作梦幻效果背景图片

    怎么制作梦幻效果背景图片呢?下面,就让小编给大家介绍一下吧. 操作方法 01 首先,我们需要打开我们电脑的ps软件(鼠标左键双击桌面上的ps快捷方式或者是鼠标右键再选择打开都是可以的). 02 打开p ...

  • 怎么制作小石块纹理背景图片

    怎么制作小石块纹理背景图片呢?下面,就让小编给大家介绍一下吧. 操作方法 01 首先,我们需要打开我们电脑的ps软件(鼠标左键双击桌面上的ps快捷方式或者是鼠标右键再选择打开都是可以的). 02 打开 ...

  • 如何制作紫色条纹背景图片

    如何制作紫色条纹背景图片呢?下面,就让小编给大家介绍一下吧. 操作方法 01 首先,我们需要打开我们电脑的ps软件(鼠标左键双击桌面上的ps快捷方式或者是鼠标右键再选择打开都是可以的). 02 打开p ...

  • 如何制作皮革效果背景图片

    如何制作皮革效果背景图片呢?下面,就让小编给大家介绍一下吧. 操作方法 01 首先,我们需要打开我们电脑的ps软件(鼠标左键双击桌面上的ps快捷方式或者是鼠标右键再选择打开都是可以的). 02 打开p ...

  • 怎么制作瓦片纹理背景图片

    怎么制作瓦片纹理背景图片呢?下面,就让小编给大家介绍一下吧. 操作方法 01 首先,我们需要打开我们电脑的ps软件(鼠标左键双击桌面上的ps快捷方式或者是鼠标右键再选择打开都是可以的). 02 打开p ...

  • 怎么制作小方块背景图片

    怎么制作小方块背景图片呢?下面,就让小编给大家介绍一下吧. 操作方法 01 首先,我们需要打开我们电脑的ps软件(鼠标左键双击桌面上的ps快捷方式或者是鼠标右键再选择打开都是可以的). 02 打开ps ...