CSS border實現三角形

今天實在閒得慌，上午html練手，仿寫的橫向導航選單。下午沒事情做到codeplex上閒狂，突然留意了一下codeplex上的乙個導航特效：如下

上圖中紅色圈出來的地方下方有個小三角，以前碰到這樣的圖形腦子裡總是認為那是一張。我很隨意的就用firebug檢視了下，結果找了半天沒有，發現是li裡面有乙個超連結a和乙個沒有任何內容的div，

原型**如下：

根本不是我想的那樣，不是一張。接著在firebug裡裡面各種修改這個div的css屬性發現，下面的那個三角形確實是div生成的。

我就把相應的屬性乙個個複製出來進行試驗，結果奇妙的各種三角形和梯形生就呈現在我的眼前。下面是乙個例子：

html **：

doctype html

>
<
html
>
<
head
>
<
title
>css border生成各種三角形
title
>
<
style 
type
="text/css"
>
div#down
#up#left
#right
#left-down
style
>
head
>
<
body
>
<
div 
id="down"
>
div>
<
div 
id="up"
>
div>
<
div 
id="left"
>
div>
<
div 
id="right"
>
div>
<
div 
id="left-down"
>
div>
body
>
html
>

。看了鑫空間 例項，居然還能實現一些圓角效果，技術還真是神奇呀。不過遺憾的是瀏覽器到底是怎麼樣解析border疊加效果的就不知所以然了。這裡有人簡單的介紹了下 ,不過我認為那只是猜測的，不是根本原因解釋，還有待研究。今天收穫不小，期待明天的收穫更多。。。

CSS border實現三角形

css盒模型 乙個盒子包括 margin border padding content。上下左右邊框交界處出呈現平滑的斜線。利用這個特點，通過設定不同的上下左右邊框寬度或者顏色可以得到小三角，小梯形等。調整寬度大小可以調節三角形形狀。示例1 一般情況下，我們設定盒子的寬高度及上下左右邊框，會呈現如下...

CSS border實現三角形

css盒模型 乙個盒子包括 margin border padding content。上下左右邊框交界處出呈現平滑的斜線。利用這個特點，通過設定不同的上下左右邊框寬度或者顏色可以得到小三角，小梯形等。調整寬度大小可以調節三角形形狀。示例1 一般情況下，我們設定盒子的寬高度及上下左右邊框，會呈現如下...

css border 畫三角形

前幾日在瀏覽 中無意發覺了人家用css來畫三角形，我覺得很有趣但不太會所以就問了一下師姐，發覺自己很無知，呵呵，原來很多人都是用這種方法畫三角形的，為什麼的，原因如下 1 一張小三角形的可能有幾百位元組，不過幾百位元組可以寫多少行 呢？2 太多會導致網頁載入得會很慢 先看 吧 html css bo...