用CSS製做三角形效果

通常咱們要在頁面上實現一個小三角形都是要作一張圖片，圖片雖然很小，仍是很浪費資源的，實際上用css中的border屬性就能實現一個三角形了：

原理爲：

1、能夠動手先設置一個大小爲20px的div，並對這div的四邊分別設置不一樣顏色的實線（solid）border，就會發現border的像素分佈

樣式爲：div{

               width: 20px;

               height: 20px;

               border-width: 20px;

               border-style：solid；

               border-top-color: blue;

               border-bottom-color: red;

               border-left-color: yellow;

              border-right-color: green; }

如圖：

 

2、若是div沒有設置大小的話，則瀏覽器會默認其爲2px，全部要先將div尺寸設置爲0px；

樣式改成：div{

                  width: 0px;

                  height: 0px;

                  border-width: 20px;

                  border-style：solid；

                  border-top-color: blue;

                  border-bottom-color: red;

                  border-left-color: yellow;

                  border-right-color: green; }

如今把div寬高都設爲0後，就出現了4個三角形，這是border像素的分佈

如圖：

 

3、此時如想保留top方向的三角形，就把其他三邊（left、right、bottom）的顏色設置爲透明（transparent）便可：

如：div{

            width: 0px;

            height: 0px;

            border-width: 20px;

            border-style：solid；

            border-top-color: blue;

            border-bottom-color: transparent;

            border-left-color: transparent;

            border-right-color: transparent; }

可將border-color縮寫爲：border-color: blue transparent transparent ;

如圖：

其餘四個方向的同一原理。