CSS border實現三角形

css盒模型

乙個盒子包括：margin+border+padding+content。上下左右邊框交界處出呈現平滑的斜線。利用這個特點，通過設定不同的上下左右邊框寬度或者顏色可以得到小三角，小梯形等。調整寬度大小可以調節三角形形狀。

示例1：

一般情況下，我們設定盒子的寬高度及上下左右邊框，會呈現如下圖：

css語言:

高亮**由發芽網提供 1

#test1

示例2：

在上面基礎上，我們把寬高度都設為0時，會呈現上述的邊界斜線：

css語言:

高亮**由發芽網提供

01#test2

這時，其實我們已經看到有上下左右四個三角形了。如果4種顏色只保留一種顏色，餘下3種顏色設定為透明（或者設定為和背景色相同的顏色），那不就出現乙個小三角了嗎？

示例3：

只保留上面的紅色，如下圖：

css語言:

高亮**由發芽網提供

01#test3

可是，ie6下不支援透明啊，會出現下圖的樣子：

找到乙個在ie6下邊框透明的文章中找到解決辦法，如下例。

示例4：

ie6下，設定餘下三條邊的border-style為dashed，即可達到透明的效果，具體原因可以見參考資料3：

css語言:

高亮**由發芽網提供

01#test4

示例5：

上面我們畫的小三角的斜邊都是依靠原來盒子的邊，還有另外一種形式的小三角，就是斜邊在盒子的對角線上：

css語言:

高亮**由發芽網提供

01#test5

保留其中一種顏色，就可以得到斜邊在對角線上的三角形了。多個這樣的三角形，通過設定邊框大小、顏色，拼湊起來可以形成任意形狀的三角形：

像這種不規則的三角形，延伸一下，放在氣泡框上，就可以省去拼背景的麻煩了：

另外，關於氣泡框，可以使用稜形字元(◆)來實現，設定其font-size，顏色和背景色一致，定位可以使用margin負值和absolute絕對定位來實現。

應該說是近似圓角，其實由乙個高度非常小的梯形展示出來。上梯形（無上邊框，下左右3px寬度，左右顏色去掉）＋矩形＋下梯形。

整個rc設定為「float: left」或「display: inline-block」分為top、bd、bottom，top中又有兩個層rc1和rc2，rc1只設定border-top，高度為0，並設定左右margin呈短小的一橫線，rc2只設定左右border並且左右margin小於rc1，height為1px，中間bd設定左右border，不設定左右margin。 – 不過ie6&7出現bug：rc在ie6中依然顯示為「dispaly: block」，而ie7中top和 bottom縮成一坨，不肯擴充套件開來，而在rc1/rc2/rc3中插入文字***後只能擴充套件到文字寬度，不能與bd對齊。

自google系產品的1px圓角按鈕，共三層div，最外層div1正常設定邊框寬度1px，呈現出上下邊框線，中間div2只設定左右邊框，且把左右margin設定成負值，呈現出圓角處的4個圓點，內層div3同樣只設定左右邊框，同時margin上下空出div2的高度，margin左右也設定與div2相同的負值。

ie6瀏覽器不支援transparent透明屬性，就border生成三角技術而言，直接設定對應的透明邊框的border-style屬性為dotted或是dashed即可解決這一問題，原因是在ie6下，點線與虛線均以邊框寬度為基準，點線長度必須是其寬度的3倍以上(height>=border-width*3)，虛線寬長度必須是其寬度的5倍以上(height>=border-width*5)，否則點線和虛線都不會出現。

如果定位外框高度或是寬度為奇數,則ie6下,絕對定位元素的低定位和右定位會有1畫素的誤差.所以,盡量保證外框的高度或寬度為偶數值。

ie6下，空div會有莫名的高度，也就是說「height: 0;」不頂用，此時形成的尖角的實際佔高於其他瀏覽器是有差異的。可使用「font-size: 0;」＋「overflow: hidden;」修復此問題。

該屬性屬性可以設定乙個物件中指定的顏色為透明色，如：border-color: pink;filter: chroma(color=pink);

「前端那些事兒」，帶你了解最新的前端技術。

CSS border實現三角形

CSS border實現三角形

CSS border實現三角形

css border 畫三角形

相關推薦