帶三角箭頭的提示框，就是下面所示：
這是一個提示框
通常我們都用圖片來實現上面那個小三角，因為這樣方便快速，但是如果圖片處理得不好，會看起來有雜邊，從而影響視覺，所以換一種思路來解決。
首先來研究一下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。
接下來的工作就很簡單了，如法炮制一個三角形，背景和提示框一致，將其疊加到之前的三角形上，只留一像素的邊，再將其定位到提示框上。
可以根據需求制作左右和下邊的三角。
以上是個人的一些心得體會，如果有不對的地方還請各位指正。
源碼： 帶三角箭頭的提示框
2019.1.3更新
最近在讀《CSS揭秘》這本書，發現里面有許多好的方法與技巧自己還沒掌握，目前瀏覽器對CSS的處理能力早已今非昔比，文章開頭的效果可以用更簡單的方式來實現，順便記錄一下 inherit 這個屬性的用法，因為這個屬性確實被我忽視了好久，用的好可以提升很多效率。
.callout { position: relative; width:300px; height:200px; border:1px solid #e0e; background:#ece; border-radius:.3em; } .callout::before { content: ""; position: absolute; top: -.41em; left: 1em; padding: .35em; background: inherit; border: inherit; border-right: 0; border-bottom: 0; transform: rotate(45deg); }
inherit不僅能繼承父元素的顏色，甚至連邊框樣式都繼承下來了，另外，css中還有一個currentColor變量也是非常好用的。
------------------------------
轉載請注明出處。