三角形演变：

1、将一个块元素的宽、高都设置为0，再设置边框样式，得如下效果图(绿色部分)：

  1. {width: 0;height: 0;border: 35px solid #7de87d;}

image.png
通过此样式得到的是一个正方形。

2、将正方形的左右边框设置成其他颜色，如：

  1. {
  2.   width: 0;
  3.   height: 0;
  4.   border-left: 35px solid #ff9900;
  5.   border-right: 35px solid #ff9900;
  6.   border-top: 35px solid #7de87d;
  7.   border-bottom: 35px solid #7de87d;
  8. }

image.png
给块元素添加设置了其他颜色后，块元素被左右的三角形切割了。

3、如果再将左右两边设置成透明，又会是什么效果呢？最终看到的是一个像漏斗形状的图形

  1. {
  2. width: 0;
  3. height: 0;
  4. border-left: 35px solid transparent;
  5. border-right: 35px solid transparent;
  6. border-top: 35px solid #7de87d;
  7. border-bottom: 35px solid #7de87d;
  8. }

image.png

4、如果将边框顶部去掉，那我们就可以直接得到向上的三角形了，如图：

  1. {
  2. width: 0;
  3. height: 0;
  4. border-left: 50px solid transparent;
  5. border-right: 50px solid transparent;
  6. border-bottom: 50px solid #7de87d;
  7. }

image.png

其他方向的三角形：

向下三角形样式：

  1. {
  2.   width: 0;
  3.   height: 0;
  4.   border-top: 50px solid #7de87d;
  5.   border-left: 50px solid transparent;
  6.   border-right: 50px solid transparent;
  7. }

image.png

向左样式：

  1. {
  2.   width: 0;
  3.   height: 0;
  4.   border-right: 40px solid #7de87d;
  5.   border-top: 40px solid transparent;
  6.   border-bottom: 40px solid transparent;
  7. }

image.png

向右样式：

  1. {
  2.   width: 0;
  3.   height: 0;
  4.   border-left: 40px solid #7de87d;
  5.   border-bottom: 40px solid transparent;
  6.   border-top: 40px solid transparent;
  7. }

image.png

左下三角形样式：

  1. {
  2.   width: 0;
  3.   height: 0;
  4.   border-bottom: 50px solid #7de87d;
  5.   border-right: 50px solid transparent;
  6. }

image.png

右下三角形样式：

  1. {
  2. width: 0;
  3. height: 0;
  4. border-bottom: 50px solid #7de87d;
  5. border-left: 50px solid transparent;
  6. }

image.png
左上三角形样式：

  1. {
  2. width: 0;
  3. height: 0;
  4. border-top: 50px solid #7de87d;
  5. border-right: 50px solid transparent;
  6. }

image.png

右上三角形样式：

  1. {
  2. width: 0;
  3. height: 0;
  4. border-top: 50px solid #7de87d;
  5. border-left: 50px solid transparent;
  6. }

image.png

线性三角形：

除了上面给到的有背景颜色的三角形外，如果需要线性形状的三角形该怎么做呢？
这里就需要用到css3的变换(transform)属性了，如下样式：
给块元素设置对角边框样式，再用transform属性旋转到对应角度就可以了，效果图：

  1. {
  2. width: 50px;
  3. height: 50px;
  4. border-top: 2px solid #7de87d;
  5. border-right: 2px solid #7de87d;
  6. transform: rotate(-45deg);
  7. -webkit-transform: rotate(-45deg);
  8. }

image.png

其他线性三角形：

image.pngimage.pngimage.png

  1. /*向左*/
  2. {
  3.   width: 50px;
  4.   height: 50px;
  5.   border-top: 2px solid #7de87d;
  6.   border-right: 2px solid #7de87d;
  7.   transform: rotate(-135deg);
  8.   -webkit-transform: rotate(-135deg);
  9. }
  11. /*向右*/
  12. {
  13.   width: 50px;
  14.   height: 50px;
  15.   border-top: 2px solid #7de87d;
  16.   border-right: 2px solid #7de87d;
  17.   transform: rotate(45deg);
  18.   -webkit-transform: rotate(45deg);
  19. }
  21. /*向下*/
  22. {
  23.   width: 50px;
  24.   height: 50px;
  25.   border-top: 2px solid #7de87d;
  26.   border-right: 2px solid #7de87d;
  27.   transform: rotate(135deg);
  28.   -webkit-transform: rotate(135deg);
  29. }

总结：
再满足兼容性的情况下，通过样式制作三角形，比用图形制作三角形会来的简单、方便一些。比如在网页制作中，要实现下拉框上的向下图标，我们就可以直接用样式制作。又如做”更多”按钮后的向右图标，我们就可以用线性的三角形的做法。