用css的border屬性實現三角 轉

今天啄米鳥給我了一個冰劍的《em實現倒三角的提示效果》。仔細琢磨了一下運用的還是很巧妙的，在現實的前端開發中也很有用，至少可以減小圖片的位元組。

先看看應用執行個體吧：

實現的原來就是：在一個寬高為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;   } 

在瀏覽器中的顯示

點擊查看demo：http://www.css88.com/demo/border/border1.html

這樣就有上下左右四個三角形了，再把除了要用的三角外的其他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;  } 

更多的執行個體請點擊查看demo：http://www.css88.com/demo/border/border.html