實現原理：主要通過css的border-color屬性，結合::before、::after和position: absolute實現。
（1）畫乙個正方形或長方形的盒子，別忘記此盒子需加上position: relative，不然之後的絕對定位元素會相對於其餘設了position: relative的父級元素或windom定位，絕對定位元素就會跑偏了。
這是乙個長方形的紅色盒子
（2）開始重頭戲，畫個氣泡框的三角形了，畫之前來了解一下border-color這個屬性。
border-color：用於設定上下左右四個邊框的顏色。
例如border-color：red green blue yellow;分別代表了上、右、下、左邊框的顏色。
現在出現了4個三角形，但我們只需要乙個三角形，怎麼辦呢，那就把其餘不要的3個三角形設成透明不就得了，
於是border-color:transparent transparent transparent pink;
現在三角形有了，長方形的框有了，用絕對定位拼湊起來不就是個氣泡框了。
完整**：
這是乙個長方形的盒子
這個氣泡框是不是很醜啊，醜就對了，醜你才會不滿意我的作品，自己做乙個，光看不練都是眼把式，但實際中很多氣泡框中間是空白的，怎麼辦呢，好辦，底色換成白色，加個border就ok了。
完整**：
這是乙個長方形的盒子
氣泡框大功告成！！！！
純CSS實現聊天框小尖角 氣泡效果
那麼，用css怎麼實現這種效果呢？首先，來寫乙個簡單的 複製 如下 這兒，我們可以得到乙個黑色的正方形，其實這是邊框組成的，因為div的寬度和高度都是0,那麼，我們具體來看看，div寬度和高度都是0時，它的上下左右四邊框都是怎樣的，下面我們把邊框的各邊顏色分別設定為不同顏色 複製 如下 lwww.c...
純CSS實現對白框
如果乙個盒子的長寬都為零，那麼它的四條border就會碰到一起，變成實心的，而且每一條border都是乙個三角形 我們就可以利用三角形來實現對白框的尖下巴。通過把border上左設定為有顏色，下右設定為透明，在 demo before放置乙個向下的等邊三角形，絕對定位使之頂部與大盒子的下邊框重合。再...
CSS實現氣泡框，太強了胸弟！！
有個需求，弄乙個簡單的氣泡框，網上大把教程，看下實現後是長什麼樣子 直接貼 了，沒什麼好說的，css content my popover father collect title collect type collect type box my popover my popover inner t...