纯css玩转三角形

如今css3盛行的时代，用canvas，svg以及linear-gradient，radio－gradient都能画出各种各样的图形。

但是早在css2时代，画三角形就不是什么新鲜事。这里简单总结一下，也方便自己查阅。

<div class="triangle-up"></div>

写出通用结构，

        .triangle-up {            width: 0;            height: 0;            border-top: 50px solid transparent;            border-left: 100px solid red;            border-bottom: 50px solid transparent;        }

如果这样写样式的话，由于没有设置border－right 会导致三角形的尖角指向右方。这个发挥一下空间想象力，纸上画一下就知道了。

如果要三角尖朝上只需不设置border-top即可。

#triangle-up {    width: 0;    height: 0;    border-left: 50px solid transparent;    border-right: 50px solid transparent;    border-bottom: 100px solid red;}

同理：
三角减朝左：

#triangle-left {    width: 0;    height: 0;    border-top: 50px solid transparent;    border-right: 100px solid red;    border-bottom: 50px solid transparent;}

三角减朝下：

#triangle-down {    width: 0;    height: 0;    border-left: 50px solid transparent;    border-right: 50px solid transparent;    border-top: 100px solid red;}

当然如果我把border-top设置100px 红色 ，border-left设置为100px 透明的话 会得到一个折角的效果：

#triangle-topright {    width: 0;    height: 0;    border-top: 100px solid red;    border-left: 100px solid transparent;}

这样又是可以设置四个方向的。原理都一样。
http://codepen.io/tianzi77/pen/WQeGmx