1、新建一個元素，隨便什么元素，不過我習慣性的會用塊元素來做。如果行內元素就display:block它。
<div class="triangle"></div>
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斜線方向的呢?那么可以用兩個正方向的三角形并在一起來實現，如下圖：
代碼：
border:50px solid #000; border-color:#f00 #000 transparent transparent; border-style:solid solid dashed dashed;
只要把顏色統一，就形成一個45斜線方向三角形，而在IE6卻會是這樣一種顯示：
這是因為IE6有個行高撐開了，把行高設置為0就跟FF一樣了：line-height:0px;
最終演示：
提示：可修改后代碼再運行!
文章來源：http://blog.sina.com.cn/s/blog_74d6cedd0100z0os.html
程序員人生，我編程，我富裕，記住wfuyu網，php教程，php學習，php手冊，CMS模版制作
聲明：本站大部分內容是作者原創，少部分收集于互聯網供大家一起學習，原版權很多不明，如有侵權請聯系本站，謝謝！
粵ICP備14040726號-1?? 2015-2020 程序員人生 版權所有
