好久沒寫css了，練練手，剛看了下在以前公司做過的乙個**，現在已經改版，裡面有個模組涉及到用css畫三角形，試著做了一下，分享出來。
密碼：123456
下面是對實現原理的分析：
1、新建乙個元素，隨便什麼元素，不過我習慣性的會用塊元素來做。如果行內元素就display:block它。
2、把它的寬高設定為height:0px; width:0px;
3、設定邊框border屬性，用來實現三角形。
首先要了解border具體是怎麼樣的，我寫了乙個這樣的樣式：
border:50px solid #000; border-color:#f00 #000 #f0f #00f;
在ff下面顯示效果如下：
出現4個三角形合併成乙個正方形。到這裡就很清晰了，只要把想要的保留，其它的設定為透明就可以達到三角形的效果，那麼：
border:50px solid #000; border-color:#f00 transparent transparent transparent;
在ff就可以看到乙個紅色三角形如下：
但是ie呢，尤其是坑爹的ie6會怎樣？ 如圖：
這是因為它不支援transparent，所以不會透明，那麼可以這樣：
border:50px solid #000; border-color:#f00 transparent transparent transparent; border-style:solid dashed dashed dashed;
在你想它透明的地方對應的把border-style設定為dashed，ie6就可以達到跟ff一樣的效果了。
那這樣也就只是實現了4個方向的三角形，那如果要直角對著45斜線方向的呢？那麼可以用兩個正方向的三角形並在一起來實現，如下圖：
只要把顏色統一，就形成乙個45斜線方向三角形，而在ie6卻會是這樣一種顯示：
這是因為ie6有個行高撐開了，把行高設定為0就跟ff一樣了：line-height:0px;
css畫三角形
好久沒寫css了，練練手，剛看了下在以前公司做過的乙個 現在已經改版，裡面有個模組涉及到用css畫三角形，試著做了一下，分享出來。帳號 287019674 qq.com 密碼 123456 下面是對實現原理的分析 1 新建乙個元素，隨便什麼元素，不過我習慣性的會用塊元素來做。如果行內元素就displ...
CSS 畫三角形
使用 css 畫三角形？第一感覺不太可能。但那是對 border 有一點誤會。來看乙個示例 它的 html 如下 我們需要注意，邊框相接的地方，即相鄰邊框的樣式。因為我們平時使用邊框，一般只幾畫素寬，所以可以不注意它們相接的樣式，但當邊框達到50畫素寬，就可以清楚看到，它們在相接時是如何處理的 這是...
css畫三角形
解析 border width 100px 100px 100px 200px border color transparent transparent transparent eb1111 屬性值值說明 color 指定背景顏色。transparent 指定邊框的顏色應該是透明的。這是預設 inh...