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; 

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

這也許就解釋了為什麼將邊框型別改為dashed時ie6顯示「正常」了。

當邊框型別為dotted時，ie6顯示如下：

將盒子的寬高設為0時黑點消失，此時ie6也顯示「正常」了。

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

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

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

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

原始碼： 帶三角箭頭的提示框

div css實現圓形div以及帶箭頭提示框效果

img1.以上 實現圓形的css設計，半徑 border radius 2.帶箭頭提示框效果 border style 邊框的樣式 border color 邊框的顏色 border width 邊框的寬度 1 實現 2 參考 1 可以去除任何乙個三角形 border color transpare...

CSS實現空心三角指示箭頭

web開發中，三角形的日常應用，以三角形指示箭頭最為常見，其用css來實現非常簡單，熟悉了之後相比於引入svg或是背景會是更好更靈活的選擇。而三角箭頭一般而言，又分為兩種，一種是視覺上沒有邊框的，我們叫做實心三角形 還有一種是視覺上有邊框的，而三角箭頭刨去邊框的部分又要與主體元素的背景顏色一致，我們...

純CSS 編寫三角形箭頭提示

要建立應從工具提示的特定一側顯示的箭頭，請在工具提示後新增 空 內容，並將偽元素類 after與content屬性一起新增。箭頭本身是使用邊框建立的。這將使工具提示看起來像乙個講話泡泡。此示例演示如何將箭頭新增到工具提示的底部 教程 jc2182.com 滑鼠懸停在這裡 工具提示文字 將箭頭放在工具...