其實早都做過用css來實現小三角的箭頭符號了，不過一直都沒靜下心來仔細研究，今天正好多看了些，都說好記性不如爛筆頭，把所了解到的趕緊記錄下來。
大致有兩種方法：邊框法和字元法。邊框法就是利用盒子的邊框變化組合形成的各種三角；字元法就是採用菱形的字元◆，然後決定定位把多餘的部分溢位掉，該種方法只適合三角和拼接板塊顏色一致。
1、邊框法：
首先先了解下原理：
設定有寬高和邊框的盒子都是這種形狀的
，**為
.box寬高為0，四邊邊框大小都一樣的盒子為
，**為
.box1寬高為0，邊框大小不一樣的盒子，例如
/*4個邊框大小不同可以拼合出不同形狀的三角形。*不等邊框的盒子*
*/.box3
由此可分別獲得上右下左4個三角形，例如像下的箭頭
/*但是ie6下會出現bug，透明的三條邊框沒達到透明的效果，圖為*向下的三角*
*/.sanjiao_down
，需要把透明的邊框樣式設定為dotted或者dashed都可解決。
最終**為
/*上面所說的都為實體無邊的三角形，那麼帶有邊框的三角形如何實現呢*向下的三角*
*/.sanjiao_down
，這種就相當於兩個絕對定位的無邊框三角形疊加在一起，外三角邊框比里三角小1px，並且外三角定位比里三角靠外1px。
為了**簡潔在非ie6下採用:before和after偽類，ie6下用樣式名來實現，**
<div
class
="box sanjiao_border"
>
<
i class
="before"
>
i><
i class
="after"
>
i>
div>
.sanjiao_border:before,.sanjiao_border .before.sanjiao_border:after,.sanjiao_border .afterview code
2、字元法
原理：採用菱形的字元◆，然後決定定位把多餘的部分溢位掉，該種方法只適合三角和拼接板塊顏色一致。
<div
class
="mod_sanjiao"
>
<
span
>◆
span
>
div>
/*view code字元法*/
.mod_sanjiao.mod_sanjiao span
css3實現小三角
利用css3的新特性可以完成很多圖形的構建，下面演示如何利用border的特性構建乙個小三角。我們首先新建乙個div，給這個div設定class demo 然後給demo設定如下屬性 demo顯示效果是這樣的 可以看到四個不同顏色的三角形連在一起。我們只想要乙個，比如向上的紅色三角形，怎麼辦，那就是...
CSS 小三角帶邊框帶陰影
乍一看，很簡單，做小三角，首先想到的是利用border的transparent特性，可以製作出小三角的效果。但是注意，這個小三角本身就是邊框製作出來的。怎麼能在小三角的外邊再加一層小邊框呢。那就必須再疊加一層一樣的東西，讓兩者有1px的錯位。問題就解決了。不想在頁面新增多餘的無意義的標籤，還想實現這...
css實現帶小三角形的邊框
主要方法是使用偽元素before和after，之前已經總結過偽元素before after用法，它們效果相當於在標籤的內部放置乙個最前或者最後的標籤，新增的標籤同樣的能夠繼承父元素的屬性，那麼通過偽元素就可以組裝拼出對話方塊的小三角 原理圖 第一步 第二步 設定浮動，讓before和after三角形...