css的border屬性實現仿圖片三角

實現的原來就是：在一個寬高為0像素的塊狀元素中設定border屬性，例如

 

  
.box{  
  
width:0px;  
  
height:0;  
  
border-bottom:50px #F00 solid;  
  
border-left:50px #03F solid;  
  
border-right: 50px #F90 solid;  
  
border-top:50px #6C0 solid;  
  
}  
 

在瀏覽器中的顯示如圖：

 

 

這樣就有上下左右四個三角形了，再把除了要用的三角外的其他3個三角（border）顏色設定為背景色就ok了。例如這樣就能得到一個顏色為#CCC的向上的三角：

 

  
.to-top{  
  
display:block;  
  
overflow:hidden;  
  
width:0px;  
  
height:0px;  
  
border:6px solid #ccc;  
  
border-color:#ccc #fff;  
  
border-width:0 6px 6px 6px;  
  
}