前幾天寫學校的一個首頁，用到了這個三角箭頭。

     首先我們來看一下，實現的原理。

     我們使用的是border 來模擬出三角形。 

p.one 
{
    width: 0;
    height: 0;
    border-top: 50px  solid red;
    border-left: 50px solid blue;
    border-right: 50px solid blue ;
    border-bottom: 50px solid red;
}                                                                                          

可以看出當沒有內容時，我們可以通過改變邊框的大小和顏色來模擬出我們想要的形狀。

我們可以分別的模擬出各種不同的形狀。  

 這樣我們就可以得到任何我們想要的的三角形。 

然後我們還可以通過調整內容的長寬來模擬出梯形或其他的圖。

然後我們就可以來看一下，怎麼去實現三角箭頭。

三角箭頭需要使用的是：after  。當然你也可以再使用一個p 標籤來模擬出相同的效果。

但是還是推薦使用 ：after 

.arrow_top{
    position: relative;
    width: 0px;
    height: 0px;
    border:10px solid transparent;
    border-bottom: 10px solid #222;
    left:70px;
    top: 20px;
     }
.arrow_top:after{
    content:"";
    display:block;
    width:0px;
    height:0px;
    border:10px solid transparent;
    border-bottom: 10px solid #888；
    position: relative;
    top:-0px;
    left: -0px;
     }                                                                    

這時你會得到兩個相同的三角形。    

這時我們通過調整after 的位置和顏色來模擬出箭頭的樣子。

調整top  和  left  以及下方三角的顏色我們就可以得到三角的箭頭。