之前在懶懶分會(huì)上分享的一點(diǎn)關(guān)于border畫小圖的內(nèi)容, 完整的ppt在(鏈接掛了).

原理

css盒模型

一個(gè)盒子包括: margin+border+padding+content

– 上下左右邊框交界處出呈現(xiàn)平滑的斜線. 利用這個(gè)特點(diǎn), 通過設(shè)置不同的上下左右邊框?qū)挾然蛘哳伾梢缘玫叫∪? 小梯形等.

– 調(diào)整寬度大小可以調(diào)節(jié)三角形形狀.

示例1

一般情況下, 我們?cè)O(shè)置盒子的寬高度, 及上下左右邊框, 會(huì)呈現(xiàn)如下圖

#test1 {
    height:20px;
    width:20px;
    border-color:#FF9600 #3366ff #12ad2a #f0eb7a;
    border-style:solid;
    border-width:20px;
}

示例2

在上面基礎(chǔ)上, 我們把寬高度都設(shè)為0時(shí), 會(huì)呈現(xiàn)上述的邊界斜線.

#test2 {
    height:0;
    width:0;
    overflow: hidden; /* 這里設(shè)置overflow, font-size, line-height */
    font-size: 0;     /*是因?yàn)? 雖然寬高度為0, 但在IE6下會(huì)具有默認(rèn)的 */
    line-height: 0;  /* 字體大小和行高, 導(dǎo)致盒子呈現(xiàn)被撐開的長(zhǎng)矩形 */
    border-color:#FF9600 #3366ff #12ad2a #f0eb7a;
    border-style:solid;
    border-width:20px;
}

這時(shí), 其實(shí)我們已經(jīng)看到有上下左右四個(gè)三角形了..如果, 我們把4種顏色, 只保留一種顏色, 余下3種顏色設(shè)置為透明(或者設(shè)置為和背景色相同的顏色), 那不就出現(xiàn)一個(gè)小三角了么

示例3

只保留上面的橙色, 看看

#test3 {
    height:0;
    width:0;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    border-color:#FF9600 transparent transparent transparent;
    border-style:solid;
    border-width:20px;
}

可是, IE6下不支持透明啊~~~, 會(huì)出現(xiàn)下圖的樣子

找到一個(gè)在IE6下邊框透明的文章中找到解決辦法, 如下例

示例4

IE6下, 設(shè)置余下三條邊的border-style為dashed,,,即可達(dá)到透明的效果~ 具體原因可以見參考資料3

#test4 {
    height:0;
    width:0;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    border-color:#FF9600 transparent transparent transparent;
    border-style:solid dashed dashed dashed;
    border-width:20px;
}

當(dāng)然, 在IE6下, 不設(shè)置透明, 將其顏色設(shè)置為背景色, 使其看不出來也是可以的.

示例5

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

#test5 {
    height:0;
    width:0;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    border-color:#FF9600 #3366ff transparent transparent;
    border-style:solid solid dashed dashed;
    border-width:40px 40px 0 0 ;
}

保留其中一種顏色, 就可以得到斜邊在對(duì)角線上的三角形了…多個(gè)這樣的三角形, 通過設(shè)置邊框大小, 顏色, 拼湊起來可以形成任意形狀的三角形.

像這種不規(guī)則的三角形, 延伸一下, 放在氣泡框上, 就可以省去拼背景圖片的麻煩了.

另外, 關(guān)于氣泡框, 可以使用棱形字符(◆)來實(shí)現(xiàn), 設(shè)置其font-size, 顏色和背景色一致, 定位可以使用margin負(fù)值和absolute絕對(duì)定位來實(shí)現(xiàn), 見示例.

應(yīng)用之圓角生成

應(yīng)該說是近似圓角,,其實(shí)由一個(gè)高度非常小的梯形展示出來

- 上梯形(無上邊框,下左右3px寬度, 左右顏色去掉)+矩形+下梯形

自適應(yīng)圓角1:

- 整個(gè)rc設(shè)置為float: left 或 display: inline-block 分為top,bd,bottom, top中又有兩個(gè)層rc1和rc2, rc1只設(shè)置border-top, 高度為0, 并設(shè)置左右margin呈短小的一橫線, rc2只設(shè)置左右border并且左右margin小于rc1, height為1px, 中間bd設(shè)置左右border,不設(shè)置左右margin;

- 不過 IE 6&7 出現(xiàn) bug：rc在IE6中依然顯示為dispaly:block,而IE7中top 和 bottom縮成一坨,不肯擴(kuò)展開來,而在rc1/rc2/rc3 中插入文字xxx后只能擴(kuò)展到文字寬度,不能與bd對(duì)齊.

- 見自適應(yīng)圓角1

自適應(yīng)圓角2

- 自 Google 系產(chǎn)品的 1px 圓角按鈕,,,三層div, 最外層div1正常設(shè)置邊框?qū)挾?px, 呈現(xiàn)出上下邊框線, 中間div2只設(shè)置左右邊框, 且把左右margin設(shè)置成負(fù)值, 呈現(xiàn)出圓角處的4個(gè)圓點(diǎn) 內(nèi)層div3同樣只設(shè)置左右邊框, 同時(shí)margin上下空出div2的高度, margin左右也設(shè)置與div2相同的負(fù)值.

- 見自適應(yīng)圓角2

其他小問題

- 透明:

IE6瀏覽器不支持transparent透明屬性,就border生成三角技術(shù)而言,直接設(shè)置對(duì)應(yīng)的透明邊框的border-style屬性為 dotted或是dashed即可解決這一問題,原因是在IE6下, 點(diǎn)線與虛線均以邊框?qū)挾葹榛鶞?zhǔn),點(diǎn)線長(zhǎng)度必須是其寬度的3倍以上（height>=border-width*3）,虛線寬長(zhǎng)度必須是其寬度的5倍 以上（height>=border-width*5）,否則點(diǎn)線和虛線都不會(huì)出現(xiàn).

- IE6的奇偶bug:

如果定位外框高度或是寬度為奇數(shù),則IE6下,絕對(duì)定位元素的低定位和右定位會(huì)有1像素的誤差.所以,盡量保證外框的高度或?qū)挾葹榕紨?shù)值.

- IE6的空div高度bug:

IE6下,空div會(huì)有莫名的高度,也就是說height:0;不頂用,此時(shí)形成的尖角的實(shí)際占高于其他瀏覽器是有差異的.可使用font-size:0; + overflow:hidden;修復(fù)此問題.

- filter: chroma濾鏡

該屬性屬性可以設(shè)置一個(gè)對(duì)象中指定的顏色為透明色, 如:

border-color: pink;
filter: chroma(color=pink);

擴(kuò)展學(xué)習(xí)

通過上面給力的文章，我們了解到使用css制作兼容的小三角。

但是日常的小三角哪有這么簡(jiǎn)單呢？例如我們的一個(gè)下拉菜單，里面有一個(gè)小三角行的，小三角行有藍(lán)色邊框，底色為白色。這就需要運(yùn)用兩個(gè)小三角來制作定位了。

通常設(shè)置上面的ul相對(duì)于上面的li為position:absolute;

這兩個(gè)的小三角行則是通過偽元素來制作，同時(shí)通過一些標(biāo)簽來兼容IE6和IE7的。如：

.header .menu ul:before,.header .menu ul .before {
display:inline-block;
width:0;
height:0;
overflow:hidden;
line-height:0;
font-size:0;
vertical-align:middle;
border-bottom:7px solid #0088CC;
border-top:0 none;
border-left:7px dashed transparent;
border-right:7px dashed transparent;
_color:#FF3FFF;
_filter:chroma(color=#FF3FFF);
content:"";
left:37px;
position:absolute;
top:-7px
}
.header .menu ul:after,.header .menu ul .after {
display:inline-block;
width:0;
height:0;
overflow:hidden;
line-height:0;
font-size:0;
vertical-align:middle;
border-bottom:6px solid #ffffff;
border-top:0 none;
border-left:6px dashed transparent;
border-right:6px dashed transparent;
_color:#FF3FFF;
_filter:chroma(color=#FF3FFF);
content:"";
left:38px;
position:absolute;
top:-6px
}

同時(shí)我還發(fā)現(xiàn)了一個(gè)bug，那就是在IE6下面當(dāng)隱藏UL，然后鼠標(biāo)經(jīng)過LI時(shí)顯示時(shí)小三角不顯示了，不知道是什么原因，我通過給UL直接設(shè)置為visibility:hidden而不是display:none，如果你也遇到同樣的情況，希望這個(gè)發(fā)現(xiàn)能夠?qū)δ阌杏茫绻銦o視IE6、IE7，那么就直接用偽元素吧。什么hack都不用。

參考資料

1. CSS小三角原理
2. CSS氣泡效果
3. IE6下邊框透明原理解析
4. CSS3實(shí)現(xiàn)的機(jī)器貓圖形

總結(jié)

以上是生活随笔為你收集整理的CSS三角形的实现原理及运用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。