用css製作一個三角形箭頭

來源:互聯網
上載者:User

  通常,我們做那個三角形,一般都是做張圖,而且需要兩張,因為一般都是下拉式功能表的效果,需要有個hover的樣式,箭頭是反的。那是不是有更好的辦法呢,畢竟要用兩張圖片來解決這麼一個小問題太浪費資源了,於是,下面我要用一個劍走偏鋒的方法來解決這一問題,用到的只需css的一個屬性,就是border-width

  我們先來看個樣式,如果設定元素邊框,會怎麼樣: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>   東西很簡單,但很想到用border邊框來製作三角形箭頭確實有點劍走偏鋒了,用的相當巧妙。相關文章:http://hi.baidu.com/kuikui100/item/2c2bbfdfe0d35713d78ed001
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.