CSS：制作三角形的原理

     之前看到css制作的图像一直很好奇，今天简单的研究一下三角形箭头的原理。

<div class="test-border">我是居中内容</div>

.test-border {
    border-top: 50px solid #ff0000;
    border-bottom: 50px solid #00a000;
    border-left: 50px solid #ff7f50;
    border-right: 50px solid #436eee;
    text-align: center;
}

     首先是上文中的代码，执行效果如下：

     根据该图形就可以发现，border也分为上下左右 四条边，每条边的衔接处是45度角。那么角都出来了，三角形还会远吗？

     我们把div 的长宽  都设置为零，删除div占位的文字，效果如下：

得到四条边组成的四个三角形。这里面很有意思的是，去掉任意一条边，正方形就会失去相应的宽度，就像这样：

<div class="test-border"></div>

.test-border {
    width: 0px;
    height: 0px;
  /*   border-top: 50px solid #ff0000; */
    border-bottom: 50px solid #00a000;
    border-left: 50px solid #ff7f50;
    border-right: 50px solid #436eee;
    text-align: center;
}

所以制作三角形并不是去掉或隐藏相应的边就可以实现的，而是要求隐藏占位，就像这样：

.test-border {
    width: 0px;
    height: 0px;
  /*   border-top: 50px solid #ff0000; */
    border-bottom: 50px solid #00a000;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    text-align: center;
}

     是不是很有意思，css真的很棒，本身就可以实现很多东西，如果再加上动画等特效简直千变万化。

--------------------------------------------

     最后再分享几个被代码耽误的画师的作品！~

https://segmentfault.com/a/1190000002780453

http://www.cnblogs.com/pigtail/archive/2013/02/17/2914119.html

http://www.cnblogs.com/wanghuih/p/5836635.html

http://www.shejidaren.com/pure-css-icons.html

--------------------------------------------

     当然，在图片较为复杂和繁多的时候，使用canvas 的制图效果优于 CSS，以上！~