css實現三角沒有想象中的那麼難，只要明白border的各種屬性的意思就很好明白css三角是如何實現的。
一下是幾個很簡單的例子：
css三角形狀的製作：
css樣式:
.******** 方法解釋：定義 左右兩邊邊框透明，下邊框不定義，上邊框定義顏色即可
此種樣式是上方樣式的一種變種，只需將border-left:的寬度設定大一點，**如下：
.********
同樣可以實現左箭頭或者右箭頭，只需要設定 border-top/border-bottom 顏色為transparent，設定一下右邊框的顏色即可
.********
這樣的效果通過變樣的方式也是可以實現的：左邊顏色透明，上方和右方設定顏色，下方設定另外一種顏色
.********
這樣的三角和上面的三角的實現思路是一致的：
實現這種的帶邊框的三角，一般會用到兩個標籤div或者span i等隨意的標籤進行疊加，是可以實現的，還有一種算是投機取巧的方式如下：
使用2個◆符號來實現三角的形狀 ◆
◆ 基本結構如下：
用物件導向的思想去書寫css,用物件導向的心態去書寫css。 ◆
◆ .x/*內容div*/
.y , .z
.y/*模擬小三角*/
.z/*模擬小三角*/
將z中的實心菱形顯示在上方，遮蓋在y的實心菱形上方，所看到的三角的邊框，是y元素的顏色
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三角的做法
示例圖 示例 1 樣式 2.box1 7.box1 span 1516 html 17 div class box1 18 a href 移動客戶端 a 19 span span 20div 易迅截圖 示例圖 示例 css box2 html 截圖 示例圖 示例 css i i em,i span ...