利用css3的新特性可以完成很多圖形的構建，下面演示如何利用border的特性構建乙個小三角。
我們首先新建乙個div，給這個div設定class="demo",然後給demo設定如下屬性：
.demo顯示效果是這樣的：
可以看到四個不同顏色的三角形連在一起。我們只想要乙個，比如向上的紅色三角形，怎麼辦，那就是把其他三個的顏色設為透明：
.demo效果是這樣的：
很多教程到這裡就結束了，但是對於新手並不友好。如果實際上demo是這樣的：
.demo那麼呈現出來的效果就是這樣的：
為什麼呢？就是因為有了padding這個屬性，導致邊框之間有了空白。形成了乙個梯形的圖形效果。所以為了避免受到其他地方class設定的影響，乙個完整的css三角形設定應該是：
.demo如此就完美了。
css實現小三角
其實早都做過用css來實現小三角的箭頭符號了，不過一直都沒靜下心來仔細研究，今天正好多看了些，都說好記性不如爛筆頭，把所了解到的趕緊記錄下來。大致有兩種方法 邊框法和字元法。邊框法就是利用盒子的邊框變化組合形成的各種三角 字元法就是採用菱形的字元 然後決定定位把多餘的部分溢位掉，該種方法只適合三角和...
CSS 小三角帶邊框帶陰影
乍一看，很簡單，做小三角，首先想到的是利用border的transparent特性，可以製作出小三角的效果。但是注意，這個小三角本身就是邊框製作出來的。怎麼能在小三角的外邊再加一層小邊框呢。那就必須再疊加一層一樣的東西，讓兩者有1px的錯位。問題就解決了。不想在頁面新增多餘的無意義的標籤，還想實現這...
css實現帶小三角形的邊框
主要方法是使用偽元素before和after，之前已經總結過偽元素before after用法，它們效果相當於在標籤的內部放置乙個最前或者最後的標籤，新增的標籤同樣的能夠繼承父元素的屬性，那麼通過偽元素就可以組裝拼出對話方塊的小三角 原理圖 第一步 第二步 設定浮動，讓before和after三角形...