标签：
通过css的border 可以绘制出三角形, 不同的样式组合，有着不同的效果，可以控制它的大小，颜色，方向。看下面各种图形，相信可能还有很多图形，大家都没见过。
先写出公共的样式：
1 .border { 2 width: 0; 3 height: 0; 4 5 border-color: transparent; 6 border-width: 1rem; 7 border-style: solid; 8 }
在上面的css基础上，添加下面的组合代码，将可以控制三角形的方向：
1 border-left-color: #000;
1 border-right-color: #000;
1 border-top-color: #000;
1 border-bottom-color: #000;
1 border-left-color: #000; 2 border-bottom-color: #000;
1 border-right-color: #000; 2 border-bottom-color: #000;
1 border-right-color: #000; 2 border-top-color: #000;
1 border-left-color: #000; 2 border-top-color: #000;
1 border-top-color: #000; 2 border-bottom-color: #000;
1 border-left-color: #000; 2 border-right-color: #000;
1 border-top-color: #000; 2 border-left-color: #000; 3 border-bottom-color: #000;
1 border-top-color: #000; 2 border-left-color: #000; 3 border-right-color: #000;
1 border-bottom-color: #000; 2 border-left-color: #000; 3 border-right-color: #000;
1 border-top-color: #000; 2 border-right-color: #000; 3 border-bottom-color: #000;
还有下面的这个效果，
1 border-left-color: #000; 2 border-right-color: #000; 3 border-left-width: 3rem;
不同的组合产生不同的效果，大家可以尝试各种组合带来的效果。
标签：
原文地址：http://www.cnblogs.com/front-end-1149980941/p/5885628.html
