1：首先乙個元素在以下結構下面是個黑色的正方形
.div12：四塊紅色和黑色的木板代表元素的四個邊框，把他們兩橫兩豎重疊起來，這時候他們在二維平面的投影便成了上面的效果。
說到這裡，大家該明白了上面的三角形圖示是怎麼來的了吧：元素沒有下邊框，而左右邊框又是透明的，相當於只有上圖中的上面的黑色三角形部分。
總結：打算向那邊，那邊的border就不存在，但是如果存在則表示在這個方向上一段位移；
比如：向上的三角，如果存在border-top:2px solid transparent; 則表明在top方向上向下移動了2px的位移,則對於div來說就是把元素的高度撐開了2px.===padding
實踐篇：
1： 實現更加簡單的寫法：
.********22
:實現對話方塊
.test-div.test-div:before,.test-div:after
.test-div:before
.test-div:after
html: hi how are you!
css實現圓角及三角
原理是在採用三個div top content bottom，top bottom層裡面加入4個em標籤，margin left，margin right逐級遞減，於是就產生了圓角的感覺 ok廢話不多說，上 先 css content.r a,r b,r c,r d.r a1.r a2.r a.r ...
css實現小三角
其實早都做過用css來實現小三角的箭頭符號了，不過一直都沒靜下心來仔細研究，今天正好多看了些，都說好記性不如爛筆頭，把所了解到的趕緊記錄下來。大致有兩種方法 邊框法和字元法。邊框法就是利用盒子的邊框變化組合形成的各種三角 字元法就是採用菱形的字元 然後決定定位把多餘的部分溢位掉，該種方法只適合三角和...
CSS實現三角形原理及過程
在開發中，遇到很多的列表都需要用到三角形的箭頭，可以直接用乙個作背景鋪墊，但這樣占用一定的記憶體，對於這種簡單的圖形純css也能實現，它占用的記憶體相對較小,所以相比而言，比更好用。下面是具體實現步驟 1 首先，建立乙個div。給它設定乙個寬高和背景顏色，並給它乙個較大的邊框,將每一邊的邊框設定不同...