(1)有邊框的三角形
我們來寫下帶邊框的三角形。
如果是乙個正方形，我們寫邊時，會用到border，但我們這裡討論的三角形本身就是border，不可能再給border新增border屬性，所以我們需要用到其他辦法。
最容易想到的，是疊加層。思路是將兩個三角形疊加在一起，外層三角形稍大一些，顏色設定成邊框所需的顏色；內層三角形絕對定位在裡面。整體就能形成帶邊框三角形的假象。
這裡就涉及到乙個絕對定位的問題，上、下、左、右四種方向的三角形相對於父級定位是不同的。首先我們來看下，當定位都為0（left:0px; top:0px;）時，會發生什麼。
html：
<divclass="********_border_up">
<span>
<divclass="********_border_down">
<span>
<divclass="********_border_left">
<span>
<divclass="********_border_right">
<span>
css:
/*向上*/
.********_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
(2)東北、東南、西北、西南三角形的寫法
繼續，來寫西北方（↖），東北方（↗），西南方（↙），東南方（↘）的三角形。
原理如圖：
根據顏色的劃分，每個可以有兩種css來寫，分別利用不同的邊來創造所需三角形。
寫乙個nw（↖）的例子：
html：
<divclass="********_border_nw">
css(1)：
.********_border_nw
css(2)：
.********_border_nw
兩種css效果均如圖所示：
以上是利用css寫三角形，晉級到
(1)有邊框的三角形
(2)東北、東南、西北、西南三角形的寫法
希望對大家有所幫助！(￣▽￣」)
用CSS畫三角形
好久沒寫css了，練練手，剛看了下在以前公司做過的乙個 現在已經改版，裡面有個模組涉及到用css畫三角形，試著做了一下，分享出來。帳號 287019674 qq.com 密碼 123456 下面是對實現原理的分析 1 新建乙個元素，隨便什麼元素，不過我習慣性的會用塊元素來做。如果行內元素就displ...
css畫三角形
好久沒寫css了，練練手，剛看了下在以前公司做過的乙個 現在已經改版，裡面有個模組涉及到用css畫三角形，試著做了一下，分享出來。帳號 287019674 qq.com 密碼 123456 下面是對實現原理的分析 1 新建乙個元素，隨便什麼元素，不過我習慣性的會用塊元素來做。如果行內元素就displ...
CSS 畫三角形
使用 css 畫三角形？第一感覺不太可能。但那是對 border 有一點誤會。來看乙個示例 它的 html 如下 我們需要注意，邊框相接的地方，即相鄰邊框的樣式。因為我們平時使用邊框，一般只幾畫素寬，所以可以不注意它們相接的樣式，但當邊框達到50畫素寬，就可以清楚看到，它們在相接時是如何處理的 這是...