(1)有邊框的三角形
我們來寫下帶邊框的三角形。
如果是乙個正方形，我們寫邊時，會用到border，但我們這裡討論的三角形本身就是border，不可能再給border新增border屬性，所以我們需要用到其他辦法。
最容易想到的，是疊加層。思路是將兩個三角形疊加在一起，外層三角形稍大一些，顏色設定成邊框所需的顏色；內層三角形絕對定位在裡面。整體就能形成帶邊框三角形的假象。
這裡就涉及到乙個絕對定位的問題，上、下、左、右四種方向的三角形相對於父級定位是不同的。首先我們來看下，當定位都為0（left:0px; top:0px;）時，會發生什麼。
html：
/*向上*/
.********_border_up
.********_border_up span
/*向下*/
.********_border_down
.********_border_down span
/*向左*/
.********_border_left
.********_border_left span
/*向右*/
.********_border_right
.********_border_right span
為什麼不是我們預想的如下圖的樣子呢
原因是，我們看到的三角形是邊，而不是真的具有內容的區域，請回憶下css的盒子模型的內容。
絕對定位（position:absolute），是根據相對定位父層內容的邊界計算的。
再結合上篇我們最開始寫的寬高為0的空div:
這個空的div，content的位置在中心，所以內部三角形是根據中心這個點來定位的。
box-shadow:0 0 2px rgba(0,0,0,1);這回我們明確的知道了，內部的三角形都是根據外部三角形實際內容的點來定位的，而非我們肉眼看到的三角形的邊界定位。
html不變，css：
/*向上*/
.********_border_up
.********_border_up span
/*向下*/
.********_border_down
.********_border_down span
/*向左*/
.********_border_left
.********_border_left span
/*向右*/
.********_border_right
.********_border_right span
.test_********_border a
.test_********_border .popup
.test_********_border .popup span
.test_********_border .popup em
原理如圖：
根據顏色的劃分，每個可以有兩種css來寫，分別利用不同的邊來創造所需三角形。
寫乙個nw（↖）的例子：
html：
.********_border_nw.********_border_nw以上是利用css寫三角形，晉級到
(1)有邊框的三角形
(2)東北、東南、西北、西南三角形的寫法
希望對大家有所幫助！(￣▽￣」)
題外話：發現css的許多知識點都可以挖掘出一些深層的東西，很有意思~也因為有許多值得推敲的地方，所以寫出來沒有能做到絕對精簡……
**:
純CSS寫三角形 border法 基礎篇
注意 所有知識點將不考慮ie6 在製作如上圖所示的三角形時，我們基本採用png或gif來實現，這種形式在編寫 時較容易掌握，所以得到普遍製作者的認可。但涉及到後期優化維護的話，就需要不斷的修改，在圖形編輯器和 編輯器之間來回切換，這無疑是加大了工作量。所以，如果單純利用css來寫的話，不但可以減少 ...
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...