三角形演变：
1、将一个块元素的宽、高都设置为0，再设置边框样式，得如下效果图(绿色部分)：
样式：
{width: 0;height: 0;border: 35px solid #7de87d;}
通过此样式得到的是一个正方形。
2、将正方形的左右边框设置成其他颜色，如：
{
width: 0;
height: 0;
border-left: 35px solid #ff9900;
border-right: 35px solid #ff9900;
border-top: 35px solid #7de87d;
border-bottom: 35px solid #7de87d;
}
效果图：
给块元素添加设置了其他颜色后，块元素被左右的三角形切割了。
3、如果再将左右两边设置成透明，又会是什么效果呢？
样式：
{
width: 0;
height: 0;
border-left: 35px solid transparent;
border-right: 35px solid transparent;
border-top: 35px solid #7de87d;
border-bottom: 35px solid #7de87d;
}
最终看到的是一个像漏斗形状的图形，如果将边框顶部去掉，那我们就可以直接得到向上的三角形了，如图：
样式：
{
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid #7de87d;
}
其他方向的三角形：
向下三角形样式：
{
width: 0;
height: 0;
border-top: 50px solid #7de87d;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
向左样式：
{
width: 0;
height: 0;
border-right: 40px solid #7de87d;
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
}
向右样式：
{
width: 0;
height: 0;
border-left: 40px solid #7de87d;
border-bottom: 40px solid transparent;
border-top: 40px solid transparent;
}
左下三角形样式：
{
width: 0;
height: 0;
border-bottom: 50px solid #7de87d;
border-right: 50px solid transparent;
}
右下三角形样式：
{
width: 0;
height: 0;
border-bottom: 50px solid #7de87d;
border-left: 50px solid transparent;
}
左上三角形样式：
{
width: 0;
height: 0;
border-top: 50px solid #7de87d;
border-right: 50px solid transparent;
}
右上三角形样式：
{
width: 0;
height: 0;
border-top: 50px solid #7de87d;
border-left: 50px solid transparent;
}
线性三角形：
除了上面给到的有背景颜色的三角形外，如果需要线性形状的三角形该怎么做呢？
这里就需要用到css3的变换(transform)属性了，如下样式：
{
width: 50px;
height: 50px;
border-top: 2px solid #7de87d;
border-right: 2px solid #7de87d;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
给块元素设置对角边框样式，再用transform属性旋转到对应角度就可以了，效果图：
其他线性三角形：
向下样式：
{
width: 50px;
height: 50px;
border-top: 2px solid #7de87d;
border-right: 2px solid #7de87d;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
向左样式：
{
width: 50px;
height: 50px;
border-top: 2px solid #7de87d;
border-right: 2px solid #7de87d;
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}
向右样式：
{
width: 50px;
height: 50px;
border-top: 2px solid #7de87d;
border-right: 2px solid #7de87d;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
总结：
再满足兼容性的情况下，通过样式制作三角形，比用图形制作三角形会来的简单、方便一些。比如在网页制作中，要实现下拉框上的向下图标，我们就可以直接用样式制作。又如做"更多"按钮后的向右图标，我们就可以用线性的三角形的做法。