好久沒寫CSS了，練練手，剛看了下在以前公司做過的一個(gè)網(wǎng)站，現(xiàn)在已經(jīng)改版，里面有個(gè)模塊涉及到用CSS畫三角形，試著做了一下，分享出來。

目前創(chuàng)新互聯(lián)建站已為數(shù)千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬空間、網(wǎng)站托管維護(hù)、企業(yè)網(wǎng)站設(shè)計(jì)、長寧網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

你可以通過這個(gè)鏈接下載源文件：用CSS畫三角形

為方便下載，提供本人網(wǎng)盤帳號(hào)密碼，請(qǐng)不要弄亂里面的頁面，以方便其它人下載，謝謝。

帳號(hào)：287019674@qq.com

密碼：123456

下面是對(duì)實(shí)現(xiàn)原理的分析：

1、新建一個(gè)元素，隨便什么元素，不過我習(xí)慣性的會(huì)用塊元素來做。如果行內(nèi)元素就display:block它。

2、把它的寬高設(shè)置為height:0px; width:0px;

3、設(shè)置邊框border屬性，用來實(shí)現(xiàn)三角形。

首先要了解border具體是怎么樣的，我寫了一個(gè)這樣的樣式：

border:50px solid #000; border-color:#f00 #000 #f0f #00f;

在FF下面顯示效果如下：

出現(xiàn)4個(gè)三角形合并成一個(gè)正方形。到這里就很清晰了，只要把想要的保留，其它的設(shè)置為透明就可以達(dá)到三角形的效果，那么：

border:50px solid #000; border-color:#f00 transparent transparent transparent;

在FF就可以看到一個(gè)紅色三角形如下：

但是IE呢，尤其是坑爹的IE6會(huì)怎樣？ 如圖：

這是因?yàn)樗恢С謙ransparent，所以不會(huì)透明，那么可以這樣：

border:50px solid #000; border-color:#f00 transparent transparent transparent; border-style:solid dashed dashed dashed;

在你想它透明的地方對(duì)應(yīng)的把border-style設(shè)置為dashed，IE6就可以達(dá)到跟FF一樣的效果了。

那這樣也就只是實(shí)現(xiàn)了4個(gè)方向的三角形，那如果要直角對(duì)著45斜線方向的呢？那么可以用兩個(gè)正方向的三角形并在一起來實(shí)現(xiàn)，如下圖：

代碼：

border:50px solid #000; border-color:#f00 #000 transparent transparent; border-style:solid solid dashed dashed;

只要把顏色統(tǒng)一，就形成一個(gè)45斜線方向三角形，而在IE6卻會(huì)是這樣一種顯示：

這是因?yàn)镮E6有個(gè)行高撐開了，把行高設(shè)置為0就跟FF一樣了：line-height:0px;

新聞名稱：用CSS畫三角形-創(chuàng)新互聯(lián)
標(biāo)題路徑：http://weahome.cn/article/csddgd.html