注意：所有知識點將不考慮ie6 (￣▽￣")
在製作如上圖所示的三角形時，我們基本採用png或gif來實現，這種形式在編寫**時較容易掌握，所以得到普遍製作者的認可。但涉及到後期優化維護的話，就需要不斷的修改，在圖形編輯器和**編輯器之間來回切換，這無疑是加大了工作量。所以，如果單純利用css來寫的話，不但可以減少**零碎的數量、減少了載入的時間，而且在修改時不用再重新切圖，減少工作量。
css3出現以後，「方形旋轉45度」製作三角形的方法固然炫酷，在相容性上卻差了點意思。所以這裡要講的是利用css2來寫三角形，相容所有瀏覽器（ie6）。
當然，任何方法都不會是十全十美的，在用css製作三角形時，必須存在乙個甚至多個沒有內容的空標籤，例如或
，如果有**潔癖的人，請慎用~
主要用到的css屬性是border（還不了解border用法的孩子們可以去w3c上學習下~）。
首先，寫乙個寬高都為0的空div樣式：
1
2
3
4
5
6
7
.border_zero
效果如圖：
我們要利用的正是border的這種邊彼此疊加的性質來製作三角形，只要讓其他三條邊隱藏起來就可達到效果。
通過上面的原理，我們來製作乙個指向下的三角形：
1
2
3
4
5
6
7
.********_down
效果如圖：
border-color:#c03 transparent transparent ;是將需要隱藏的邊的顏色設定成透明；
border-width:30px 30px 0; 是將三角形對邊的寬度設定為0（這裡對邊是border-bottom）。
這麼做的原因是減小三角形有效作用區域。如果只改變顏色透明，而不改寬度會怎麼樣呢？
我們來給這個樣式新增個陰影看下（這裡建議用ff和chrome瀏覽器檢視效果）。
1
2
3
4
5
6
7
8
.********_down_big
效果如圖：
改變對邊寬度為0後，
1
2
3
4
5
6
7
8
.********_down_small
效果如圖：
兩種效果對比之下，雖然三角形看起來大小相同，但實際有效作用區域是不相同的。了解這一點，是為以後來寫js的tip彈出層效果時做準備。
通過上面的內容，我們就可以開始寫文章最開頭引用效果圖的樣式了。
html:
1
2
3
4
5
6
<divclass=" test_zone">
<divclass="test_********">
<ahref="#">三角形
<divclass="popup"><span>純css寫三角形
css:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
.test_********
a
.popup
.popup span
以上主要是border法寫三角形的基礎內容，後續會再整理一些「晉級」類的總結~_(:з)∠)_
純CSS寫三角形 border法
1 有邊框的三角形 我們來寫下帶邊框的三角形。如果是乙個正方形，我們寫邊時，會用到border，但我們這裡討論的三角形本身就是border，不可能再給border新增border屬性，所以我們需要用到其他辦法。最容易想到的，是疊加層。思路是將兩個三角形疊加在一起，外層三角形稍大一些，顏色設定成邊框所...
css繪製向左三角形 純css 實現三角形
每天學習乙個小技能 現在的 上 手機上我們經常見到一些下拉列表的下箭頭 其實方式很簡單 直接引入 或者去找字型檔案 隨著技術的發展 前端效能這一方面有很大的提公升 再不能用 或者盡量不適用的情況下 css 也可以繪製簡單的 下面就是三角形 首先這個思路的講解 就是用到了 border 邊框這個屬性 ...
純css繪製三角形
繪製三角形原理 html div css div效果圖 易迅三角實現 html 易迅三角 span div css divspan 效果圖 愛拍對話方塊實現 html class box class sj one span class sj two span div less charset utf...