主要方法是使用偽元素before和after，之前已經總結過偽元素before、after用法，它們效果相當於在標籤的內部放置乙個最前或者最後的標籤，新增的標籤同樣的能夠繼承父元素的屬性，那麼通過偽元素就可以組裝拼出對話方塊的小三角；
原理圖：
第一步：
第二步：
設定浮動，讓before和after三角形重疊：
第三步：
通過top -px畫素把三角形移到div邊框上
第四步：
把after三角形顏色調整為和div背景顏色一致，實現對話方塊的小三角形；
原理很簡單，那麼三角形怎麼實現？
在border中有個transparent引數，這個引數屬於border-color屬性，從css2開始定義出border的顏色為透明，那麼我們指定border四邊的時候，只要有一邊不透明，則會畫出三角形，如**：
border-bottom:8px solid red;
border-top:8px solid transparent;
border-left:8px solid transparent;
border-right:8px solid transparent;
由於畫出的是實心的三角形，要得到空襲的邊框三角形，就需要乙個和背景色一致的小三角形覆蓋在乙個和邊框顏色一致的大三角形上，把小三角形的z-index大於大三角形的z-index，這樣就構成了空心的三角形；
具體的實踐**：
值得說明的一點，top值上移的畫素是border畫素的2背，而要想使得三角框和div邊框完美融合不突兀，需要使得三角組合的得到的邊框畫素和div border畫素一致，如果div border是1px，那麼大的三角形和小的三角形邊框差就需要為1px，大的三角形上移的top和小三角形上移的top畫素插則為2px，如果不能理解這段話，多實驗以上**，修改引數即可；
CSS 小三角帶邊框帶陰影
乍一看，很簡單，做小三角，首先想到的是利用border的transparent特性，可以製作出小三角的效果。但是注意，這個小三角本身就是邊框製作出來的。怎麼能在小三角的外邊再加一層小邊框呢。那就必須再疊加一層一樣的東西，讓兩者有1px的錯位。問題就解決了。不想在頁面新增多餘的無意義的標籤，還想實現這...
CSS 帶邊框的三角形
思路是將2個三角形疊加起來，外層的三角形稍微大一些。思路和 css 內圓角 這個筆記的 方法一 類似。這個筆記最後會補充 css 畫三角形 這個筆記裡記漏的一點。html css parent child 以上是最終 逐步分析 css parent child 一開始的思路是分別生成外層和內層的三角...
利用 before after 寫小三角形
之前寫的三角形一直在同乙個顏色，沒有邊框的樣式。如下 css 如下 tri up tri left tri right tri down 若要寫以下的小三角，則需要用到偽類 before after demo 方框的樣式 demo after,demo before demo after 此處是乙個...