浏览网页的时候，发现有些网页当中的箭头（三角形）是由border形成的，感到新奇。
研究了一番后，首先普通的border用法是这样的
<div style=" border-width:2px; border-color:#F44336; border-style:solid; width:100px; height:100px; background-color:Black;"> </div>
如果把border-width放大10倍、border-color分别设置四个颜色，那么boder的四边就会各自变成不同颜色的梯形状
<div style=" border-width:20px; border-color:#F44336 #2196F3 #009688 #FFEB3B; border-style:solid; width:100px; height:100px; background-color:Black;"> </div>
然后把div的width与height都设置为0，那么border的四边就会各自变成不同颜色的三角形
<div style=" border-width:20px; border-color:#F44336 #2196F3 #009688 #FFEB3B; border-style:solid; width:0; height:0; background-color:Black;"> </div>
现在三角形（小箭头）已经出现了，接下来把上、右、下边还有background-color的颜色设置成transparent，就变成了一个三角形
<div style=" border-width:20px; border-color:transparent transparent transparent #FFEB3B; border-style:solid; width:0; height:0; background-color:transparent;"> </div>
又或者调整border四边的各自border-width，就会出现高度不一的三角形
<div style=" border-width:20px 30px 40px 50px; border-color: #F44336 #2196F3 #009688 #FFEB3B; border-style:solid; width:0; height:0; background-color:Black;"> </div>
最后利用这种技巧加absolute，就可以做出很巧妙的形状来替代一些简单的图片
原文：http://www.cnblogs.com/kongbailingluangan/p/6443268.html