純CSS製作帶三角（border篇）

以前寫過一篇純CSS製作帶三角的邊框，那篇文章是用HTML特殊字元來製作三角的，今天介紹下，如何用 border 來製作三角。

html 代碼如下：

<div class="arrow-up"></div><div class="arrow-down"></div><div class="arrow-left"></div><div class="arrow-right"></div>

css 代碼如下：

.arrow-up {    width: 0;    height: 0;    border-left: 5px solid transparent;    border-right: 5px solid transparent;    _border-left: 5px solid white;    _border-right: 5px solid white;    border-bottom: 5px solid black;    overflow:hidden;}.arrow-down {    width: 0;    height: 0;    border-left: 20px solid transparent;    border-right: 20px solid transparent;    _border-left: 20px solid white;    _border-right: 20px solid white;    border-top: 20px solid #f00;    overflow:hidden;}.arrow-right {    width: 0;    height: 0;    border-top: 60px solid transparent;    border-bottom: 60px solid transparent;    _border-top: 60px solid white;    _border-bottom: 60px solid white;    border-left: 60px solid green;    overflow:hidden;}.arrow-left {    width: 0;    height: 0;    border-top: 10px solid transparent;    border-bottom: 10px solid transparent;    _border-top: 10px solid white;    _border-bottom: 10px solid white;    border-right:10px solid blue;    overflow:hidden;}

如下：

測試瀏覽器：chrome，firefox，ie8，ie7，ie6，safari，opera

PS：

1、原文並沒有相容 ie6 瀏覽器，所以我改了下，現在的版本已經可以相容所有瀏覽器了。

2、相對於用 border 來做三角，我更加喜歡用 html 特殊字元來製作三角。

原文地址：http://www.w3cplus.com/code/303.html