效果如下：
实现这一过程其实很简单： 1、先创建一个盒子
<div id="trangle"></div>2、为这个盒子添加样式
#triangle { height: 0; width: 0; border-right: 50px solid transparent; border-bottom: 50px solid yellow; border-left: 50px solid transparent; }搞定！顿时觉得好简单，一个边框就能解决的事
实现原理如下 先创建一个有宽高的盒子，同时设置四条边框的大小，假设为50px，结果如下图： 可以发现边框与边框的连接是一条斜线，那么如果不设置宽高的话，结果会怎样：
变成了一个被四种颜色平均分割的正方形了，我们所要的三角形不正是其中的一部分吗，接下来我们只要选择我们所需要的那一部分就好了，所以可以这么做（选择上面那块红色的）：
#triangle { height: 0; width: 0; border-top: 50px solid red; /*此处将左右的边框设置为透明色*/ border-right: 50px solid transparent ; border-left: 50px solid transparent; }把剩余两边设置为透明色即可以，这里不为下边框设置宽度和颜色是因为下边框取消的话，原来的图像会变成这样： 对整个图像并没有太大的影响，而且释放了下边框所占的位置，当在图下面添加东西时不会有凭空的一块空白。 所以上面那段style运行的结果如下： 至此三角形的绘制也就完成了，如果需要绘制一个直角三角形，那么可以只设置（左、右）中的一个和（上，下）中的一个即可。结果展示： 只要把不需要的那部分设置为透明色就可以了。
