div+css實現帶三角箭頭提示框

帶三角箭頭的提示框，就是下面所示：

  

這是一個提示框

通常我們都用圖片來實現上面那個小三角，因為這樣方便快速，但是如果圖片處理得不好，會看起來有雜邊，從而影響視覺，所以換一種思路來解決。

首先來研究一下CSS是如何?三角形的。

假定有一個盒子(div)，給定寬高分別為100像素，再給定邊框50像素，那麼它看起來會是下面這個樣子(為了更直觀，給了邊框四種不同的顏色)：

 

 

接下來，把盒子的高度設為0：

 

再把寬度也設為0：

 

這樣雛形就已經出來了，由於IE6的bug(高度為0的div會有一定預設的高度，我的電腦上測量結果為19像素)，需要做一些小調整，給div加一個overflow:hidden，IE6就能正確解析了。

接下來的工作就是去掉其餘的三個邊框。以向上箭頭為例，假如我想讓箭頭朝上，那麼就需要將左、上、右三條邊框的顏色給去掉。一個常規的方法是將這三條邊框的顏色設為透明，即transparent屬性。

border-color:transparent transparent #056F61

設定以後可以看到如下效果：

 

這樣CSS製作的三角形就完成了。到這裡看起來工作好像差不多可以結束的樣子，還需要測試一下瀏覽器的相容性，經過測試，主流瀏覽器都支援，但是開啟IE6，結果悲催了，居然是這個樣子(T-T) ：

 

排查一下哪個地方出了問題，才發現原來IE6不支援transparent屬性，如之奈何？前面已經做了這麼多工作，總不能倒在IE6下吧。

於是上網查了一下IE6支援transparent的方法，結果是需要使用濾鏡。不過這個方案肯定不行，要使用濾鏡的話，還不如直接用圖片。之後再研究了一下，

發現如果將其餘三條邊的屬性由solid改為dotted或者dashed就可以了：

/*border-style:solid*/border-style:dotted dotted solid;border-width:50px;border-color:transparent transparent #056f61; 

這樣看起來IE6就“支援”transparent屬性了。為什麼會這樣呢？這個問題我還沒搞明白。經過測試發現，如果將盒子的邊框類型設定為dashed，在IE6下會有一個奇特的行為：

當盒子的寬高為100像素，邊框的寬度為34像素且類型為dashed時，邊框就會消失，設為33像素時又顯示了，而且這個比例是一定的。

這也許就解釋了為什麼將邊框類型改為dashed時IE6顯示“正常”了。

當邊框類型為dotted時，IE6顯示如下：

將盒子的寬高設為0時黑點消失，此時IE6也顯示“正常”了。

雖然IE6的解析可能有問題，但是總算“解決”了其不支援transparent的bug。

接下來的工作就很簡單了，如法炮製一個三角形，背景和提示框一致，將其疊加到之前的三角形上，只留一像素的邊，再將其定位到提示框上。

可以根據需求製作左右和下邊的三角。

以上是個人的一些心得體會，如果有不對的地方還請各位指正。

源碼： 帶三角箭頭的提示框

------------------------------

轉載請註明出處。