在前端开发过程中，三角形在很多地方都能用到。
但是为了保证网站的性能，很少会用图片，而是用CSS来实现。
至于为什么不用图片，我简单说两句：
①图片体积比较大，数据传输量大。
②一张图片会引发一次HTTP请求。
这是影响页面加载速度的，所以我们更倾向于用CSS来实现！
至于“用CSS来实现三角形”的原理，我用一句话概括一下就是：将一个元素的width和height定义为0，然后为它设置较粗的边框，并且将其中任意三条或者两条边框的颜色定义为transparent。
我就举一个具体的例子吧：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div{
width: 0;
height: 0;
border-width: 30px;
border-style: solid;
border-color: red green blue orange;
}
</style>
</head>
<body>
<div></div>
</body>
</html>预览效果如下：
我们晓得，border-color属性包含4个值，分别对应上、右、下、左4条边的颜色，呈顺时针排列。
倘若将右、下、左3条边的颜色改成transparent（透明），我们将会看到一个指向下方的红色的三角形，感兴趣的可以自己试试。
