以前遇到textarea上面有小三角氣泡，總是把小三角氣泡單獨切下來，然後再絕對定位上去。今天，切頁面我就換了乙個方法，用純css上！
其實原理很簡單:就是讓兩個小三角疊起來，上面的小三角往一側錯一下位，就剛好露出下面小三角的邊，為此上下三角的顏色是不同的，而且需要上面的小三角蓋住下面的三角。所以，上面的小三角為白色，下面的小三角是你想要的邊框顏色。也就是border-color不同。為了能達到這個效果，要求兩個小三角要一樣大小，也就是border-width要一樣。
下面直接上**：
1/*右側氣泡 相容firefox chrome safari ie6,7,8,9*/
2.right_tip
3.right_tip .icon1
4.right_tip .icon256
<
div
class
="right_tip"
>看我沒有用啊，你相信嗎？<
em class
="icon1"
>
em><
em class
="icon2"
>
em>
div>
需要解釋幾個地方：
1.width和height設定為0，是因為要解決ie6下面空標籤的bug
2.font-size和line-height設定為0，是因為要解決ie6下面邊框bug
3._border-style:dashed dashed dashed solid,是因為要解決ie6下面border無法透明的bug，那怎麼判斷應該給哪個邊設定dashed，哪個應該設定為solid？這個很好判斷，只要讓它跟你的border-color對應就行，哪個邊是transparent的，hack對應的就是dashed
4.這兩個em也可以換成span，一定要注意他們的是並列的關係，而不是包含關係，不然會在chrome和safari裡面出現上面的三角完全蓋住下面三角的bug，這個要寫他們的hack比較麻煩，而且firefox和ie系列的偏移量也有小問題不一致，所以，介於此我果斷換了結構，把原來巢狀的結構換成並列的
1.demo
2textarea
3.icon1
4.icon256
<
div
class
="demo"
>
7<
textarea
name
=""id
="">
textarea
>
8<
span
class
="icon1"
><
span
class
="icon2"
>
span
>
span
>
9div
>
參考資料：
css模擬小氣泡三角（二）
1 down tip 15.down tip after 看我沒有用啊，你相信嗎？這個是用after偽類實現的，在div後面新增內容content 然後模擬小氣泡的 這個效果我只在現代瀏覽器裡面實現。需要介紹幾個地方 1.ie9寫這麼多相容。是啊，我也不想，這麼一大坨是用來解決，在ie9下面bord...
純CSS實現div三角效果
效果圖 方法一的效果圖 方法一 css top first first p html 帶背景顏色的小三角實現是比較簡單的！方法二 css a w 模擬灰色陰影背景層 x 內容div y z y 模擬小三角 z 模擬小三角 html 用物件導向的思想去書寫css,用物件導向的心態去書寫css。方法三 ...
css 純 css 製作帶三角（border篇）
以前寫過一篇純css製作帶三角的邊框 那篇文章是用html特殊字元來製作三角的，今天介紹下，如何用 border 來製作三角。html 如下 div class arrow up div div class arrow down div div class arrow left div div cl...