純css製作一個三角形箭頭

我們先來看個樣式，如果設定元素邊框，會怎麼樣：

test

　　似乎看不出什麼，讓我給四個邊框加上不同的顏色吧再看看吧：

test

　　是不是發現了些什嗎？對，讓我們把中間的文字去掉吧：

 

　　這樣，就出現4個三角形了，然後我們如果需要頂部那個三角形，只需要將border的left、right、bottom設定成背景色就行了：

 

　　這樣，我們需要的三角形就出現了，並且可以設定4個不同方向的了：

       

　　樣式代碼很簡單，就幾句話：

 
  
  

   

    
 代碼如下
    
複製代碼
 
   
 
   

    
<strong style="float: left; border-style: solid; border-width: 10px;
border-color: #000 #ccc #ccc #ccc; height:0"></strong>