css 純 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>

.arrow-up .arrow-down .arrow-right .arrow-left

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

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

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

css 純 css 製作帶三角的邊框

首先附上效果圖 以上的效果完全是用 css 來實現的，那麼是怎麼實現的呢？我們知道 html 中有一些特殊的字元，具體的 html特殊字元大全 通過特殊字元 利用 css 中的 margin 或者 position 方法完全可以實現以上效果。doctype html html lang en us ...

用css製作帶三角矩形

校園招聘的筆試題目中也有一道題目要求利用 css來繪出乙個帶三角矩形。如圖所示。在css 中，三角形是採用盒子模型的 border 屬性來繪製的。所以在進行上圖繪製之前有必要回顧一下 css盒子模型。css盒子模型同一方向共有四個屬性，比如橫向有 margin border padding widt...

純css製作帶三角 相容所有瀏覽器

如何用 border 來製作三角。html 如下 如下 css 如下 如下 arrow up arrow down arrow right arrow left 效果圖如下 首先附上效果圖 以上的效果完全是用 css 來實現的，那麼是怎麼實現的呢？我們知道 html 中有一些特殊的字元，具體的 ht...