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

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

操作方法

• 01

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

• 02

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

• 03

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

• 04

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

• 05

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

• 06

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

• 07

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

下一篇：Abaqus如何给实体部分赋予材料属性？
上一篇：PhpStorm编辑栏如何设置显示更多Tab