第一步：绘制出一个小正方形
1、html代码
<div class="ico"> </div>
2、css代码
.ico{ width:50px;height:50px; background:red; }产生结果：
第二步：给小正方形加上不同的边框颜色
1、css样式
.ico{width:50px; height:50px; background:red; /*新增内容*/ border:20px solid blue;}产生的结果：
第三步：给上边框单独加上一个颜色
1、css样式
.ico{width:50px;height:50px; background:red; border:20px solid #6600ff;/*新增内容*/border-top:20px solid #000000;}产生的结果：
第四步：把长方形的宽度和高度从原来的50px 改为0px
1、css样式
.ico{/*--修改部分*/width:0px; height:0px; background:red; border:20px solid #6600ff; border-top:20px solid #000000;}产生的结果：
第五步：把边框的颜色设置为透明的，只留上边框的颜色为黑色
1、css样式
.ico{width:0px;height:0px; background:red; /*修改的样式*/border:20px solid transparent;;border-top:20px solid #000000;}产生的结果：
解释：当边框变为transparent透明后，出现红色的区块，是因为我们在构建长方形时加红色的背景 background:red，最后一步，去掉background:red；就可以了
第六步：把background:red；去掉
.ico{width:0px;height:0px; /*background:red;*/ border:20px solid transparent;border-top:20px solid #000000;}产生的结果：
终于一个完整的三角形制作出来了，写的步聚有点多，主要是想让大家看到这个三角形是如何演变而来的。
如果没有看懂，或有代码方面问题的，可以加群：611428142 来听我讲课吧