無論是提示框還是導航欄都能看到如上圖所示的帶有箭頭的框框，這種箭頭可以通過背景或者是css來實現，本文介紹三種通過css實現帶箭頭的提示框。
1.通過border屬性
思路：兩個三角形，通過定位使兩個三角形相差1px作為邊框。
2.css3 transfrom
思路：先做乙個兩條邊相同顏色的正方形，然後旋轉一定角度就是三角形了
3.特殊字元'♦'
思路：特殊字元漏出上半部分，看上去就像三角形了
一、通過border屬性：
我們先做乙個寬和高都是10px的div，邊框也是10px，
width: 10px;
height: 10px;
border: 10px solid;
border-color: red green yellow blue;
如下圖：
圖中間空白是我們設定的寬和高，如果設定為0px，會出現什麼情況呢？，如下圖：
這時候我們就可以通過設定它的左右和下邊框的顏色都設成透明或和背景顏色相同的顏色，就出來我們想要的三角形了。如下圖：
現在我們來實現第一幅圖上的效果：
css：
.info
.n**
.n**-border
.n**-background
html：
提示資訊
二、css3 transfrom
我們首先製作乙個兩條相鄰的邊框顏色相同，其他兩條邊邊框為0px的div方框。如圖：
在將方框旋轉45度就可以實現三角提示效果了。
css：
.info
.n**
html：
提示資訊
三、特殊字元'♦'
'♦'是乙個特殊字元，也就相當於乙個字，所以大小是通過font-size來設定，實現第一幅圖的效果：
css：
.info
.n**
.n**-border
.n**-background
html：
提示資訊程式設計客棧;/span>
♦ ♦
下面是乙個相容ie5.5+,chrome,firfox等瀏覽器的乙個demo，如果你有用到可以直接考到自己的專案中。
程式設計客棧r">
hello world!
效果圖：
小結：帶箭頭的提示框給使用者的互動帶來很好的效果，本文介紹了三個方法，如果你還有其他方法可以@me，我會非常感激。希望本文能夠對你有些幫助。
本文標題: 三種帶箭頭提示框總結例項
本文位址:
帶箭頭的提示框樣式
做提示框的箭頭時可以用以下方法 html span class form error 輸入錯誤！s class dec1 s s class dec2 s span css form error.form error s.form error s.dec1.form error s.dec2 思路 ...
div css實現帶三角箭頭提示框
帶三角箭頭的提示框，就是下面所示 這是乙個提示框 通常我們都用來實現上面那個小三角，因為這樣方便快速，但是如果處理得不好，會看起來有雜邊，從而影響視覺，所以換一種思路來解決。首先來研究一下css是如何實現三角形的。假定有乙個盒子 div 給定寬高分別為100畫素，再給定邊框50畫素，那麼它看起來會是...
CSS css三角提示框
現在我們有乙個需求，就是三角提示框 像這樣 注意這個三角導航，我們需要達到這樣的效果。第一種辦法 現在有兩種方案，第一種需要用到css3的transform。我們直接上 border 1px solid ddd width 200px height 70px margin top 200px pos...