三角形图标在网站开发时，有很多地方会用到的，比如作为一个指示箭头，又比如作为一个下拉框的标示图标，都是需要三角形的。不用图片来生成三角形图标，在HTML5下，我们可以用canvas画图的方式来生成。下面一起看下
方法/步骤
1
HTML很简单，就是定义一个canvas画布，如图
2
利用JS脚本来在画布上画三角形，相关代码如下：这里主要是利用在不同坐标画线条来形成三角形，然后在区域内填充上颜色就行了。function draw_angle() { var cv, ct; cv = document.getElementById('angle'); ct = cv.getContext('2d'); ct.beginPath(); ct.moveTo(0, 0); ct.lineTo(60, 0); ct.lineTo(30, 40); ct.closePath(); ct.fillStyle = '#BE0000'; ct.fill();}
3
运行结果如图，
4
我们当然是可以通过画笔线条的长短来控制三角形的大小了，三角形的颜色可以通过填充色来确定。如图，修改下代码里的几个地方，
5
运行后，我们得到了大小，颜色和之前的都不一样的一个三角形。
6
把代码稍改下，如图，我们可以为三角形的边加上虚线，
7
运行效果如图，发挥你的想像力，你可以画出一个更炫，更漂亮的三角形。
8
上面介绍的生成三角形的这种方法，有一个比较大的缺点，就是早期的浏览器不支持，即不支持html5的浏览器都不能用这种方法。我们可以用之前介绍过的二种方法来生成三角形，如下链接，
上一篇：css如何制作带三角的提示框
下一篇：CSS3制作各种形状图像