CSS绘制三角形的原理剖析

今天在写界面的时候要用到一个倒三角作为下拉按钮，下面对border进行解析

    .border {  
      width:50px;  
      height:50px;  
      border: 2px solid;  
      border-color: #ADFF2F #BA55D3 #F4A460 #FF0000;  
    }  

如下：

当我们增大border的值时，

    .border {  
        width:50px;  
        height:50px;  
        border: 20px solid;  
        border-color: #ADFF2F #BA55D3 #F4A460 #FF0000;  
}  

发现边框变成了梯形

设想如果把width和height属性设置为0，采用极限的思想会编程什么呢？

    .border {  
      width:0px;  
      height:0px;  
      border: 20px solid;  
      border-color: #ADFF2F #BA55D3 #F4A460 #FF0000;  
}  

结果如下：

那么现在我们对如何绘制三角形就有一个思路：把其他三边的边框的border-color值设为transparent，即可得到一个三角形。比如:

    .border {  
      width:0px;  
      height:0px;  
      border: 20px solid;  
      border-color: #ADFF2F transparent transparent transparent;  
}  

效果如下：

因此，实现了我们想要的效果！