成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS三角的寫法（兼容IE6）

LMou / 1995人閱讀

摘要：而且如果上面沒有塊元素的時(shí)候，是從內(nèi)聯(lián)元素的內(nèi)容開始算起的，所以上面的就會(huì)到瀏覽器可視區(qū)域的上面。

目錄

簡(jiǎn)介

優(yōu)點(diǎn)

原理

1. 先創(chuàng)建一個(gè)div

2. 然后給div設(shè)定邊框。

3. 給div的四個(gè)邊框都設(shè)置不同的顏色

4. 把寬度和高度都變成0

5. 其余角為透明

6. 兼容IE6瀏覽器

造成這樣的原因是：

最簡(jiǎn)單的解決辦法：(后面添加)

其他的解決辦法：

7. 解決內(nèi)聯(lián)元素的三角顯示問題

為什么會(huì)有這個(gè)問題

解決辦法

1. 去掉固定的內(nèi)容高度

2. 將內(nèi)聯(lián)元素轉(zhuǎn)化為塊級(jí)元素或者行內(nèi)塊元素

3. 將元素脫標(biāo)（如果涉及特殊的布局可以直接使用）

最終代碼

擴(kuò)展

有角度的三角

有一個(gè)角是直角的三角

箭頭

對(duì)話框

兼容IE8的小圓角矩形

利用css3旋轉(zhuǎn)來制作三角形

簡(jiǎn)介

三角的做法有好幾種：

圖片、精靈圖（網(wǎng)易）


字體圖標(biāo)（京東）


純代碼寫（亞馬遜）

這里主要介紹的純代碼寫的。

優(yōu)點(diǎn)

代碼寫的三角，不管大小是多少，是不失真的。

代碼運(yùn)行比圖片更快。

如果項(xiàng)目中沒有引用字體圖標(biāo)，代碼寫是比較可靠的。

原理 
原理就是使用css的盒模型中的border屬性

使用border屬性就可以實(shí)現(xiàn)一個(gè)兼容性很好的三角圖形效果，其底層受到border-style的inseet/outset影響，邊框3D效果在互聯(lián)網(wǎng)早期還是很流行的，。
1. 先創(chuàng)建一個(gè)div
2. 然后給div設(shè)定邊框。 
div{
    width:200px;
    height:100px;
    border:10px solid red; 
}

可以看到效果：

3. 給div的四個(gè)邊框都設(shè)置不同的顏色 
div{
    width:200px;
    height:100px;
    border-left:10px solid red;
    border-top:10px solid green; 
    border-right:10px solid blue; 
    border-bottom:10px solid yellow; 
}

可以看到以下效果：

可以看到兩個(gè)border交叉的地方，有斜邊存在。

4. 把寬度和高度都變成0 
div{
    width:0px;
    height:0px;
    border-left:10px solid red;
    border-top:10px solid green; 
    border-right:10px solid blue; 
    border-bottom:10px solid yellow; 
}

/*也可以這么寫*/
div{
    width:0px; 
    height:0px;
    border:10px solid;   
    border-color:red green blue yellow;
}

可以看到以下效果：

這個(gè)時(shí)候就看得很明顯了，出現(xiàn)了四個(gè)三角。那如果要出現(xiàn)一個(gè)，那么就將其他的三個(gè)弄成透明色就可以了。

這個(gè)就是三角形的由來。

5. 其余角為透明

這里的設(shè)置也遵循 上右下左 的順序，把不需要的角弄成透明色。

div{
    width:0px; 
    height:0px;
    border-width:10px;   
    border-color:#f00 transparent transparent transparent;
    border-style:solid;
}

/*也可以再進(jìn)行合并*/
div{
    width:0px; 
    height:0px;
    border:10px solid;   
    border-color:#f00 transparent transparent transparent;
}

這樣一個(gè)三角就完成了。
那么問題來了，那就是兼容問題，IE6的兼容問題，如果不要求兼容IE6可以忽略下一步。

6. 兼容IE6瀏覽器

同樣的一個(gè)三角，在IE6的顯示是什么呢？

造成這樣的原因是：

IE6不支持border的transparent

IE6的高度最小為19px，不支持高度為0

在IE6下面，如果想把元素例如div設(shè)置成19像素以下的高度就設(shè)置不了了。這是因?yàn)镮E6瀏覽器里面有個(gè)默認(rèn)的高度，IE6下這個(gè)問題是因?yàn)槟J(rèn)的行高造成的。
最簡(jiǎn)單的解決辦法：(后面添加) 
div{
    /*不支持transparent*/
    border-style:solid dashed dashed dashed;
    /*高度最小不為0*/
    overflow:hidden;
}
其他的解決辦法：

查了查網(wǎng)上的，如果是IE6不支持transparent,

可以這么做：

div{
    border:solid 1px transparent; 
    _border-color:tomato; 
    _filter:chroma(color=tomato); 
}

所以我覺得用在這里也可以，BUT沒有親測(cè)過，如果哪位小可愛測(cè)過可以請(qǐng)告知我^ ^。

div{
    width:0px;
    height:0px;
    margin:100px auto;
    border-width:10px;
    border-style:solid;
    border-color:#f00 transparent transparent transparent;
    _border-color:#f00 tomato tomato tomato; 
    _filter:chroma(color=tomato);
}

如果是解決IE6的高度問題(也可以前面加下劃線，表示兼容的IE6)

div{
    height:0;
    font-size:0;
    line-height:0;
    overflow:hidden;
}
7. 解決內(nèi)聯(lián)元素的三角顯示問題 為什么會(huì)有這個(gè)問題

因?yàn)槲覀儎偛庞?b>

去制作三角，當(dāng)然我們經(jīng)常會(huì)使用或者偽元素去做一些小圖標(biāo)。那么在顯示上面，可能會(huì)有問題。
下面的代碼：

可以看到頁面是這個(gè)樣子的:

為什么是這個(gè)樣子的，那么我們?cè)倏吹淖屑?xì)一點(diǎn)。
它實(shí)際是這個(gè)樣子的。

造成這樣的原因



是因?yàn)樾袃?nèi)元素自己有固定的高度，不能設(shè)置寬高為0，所以上面下面都是50px沒有問題，但是中間撐開了距離，也就有了梯形的效果。


而且如果上面沒有塊元素的時(shí)候，是從內(nèi)聯(lián)元素的內(nèi)容開始算起的，所以上面的border就會(huì)到瀏覽器可視區(qū)域的上面。
解決辦法

這個(gè)有很多的辦法：

1. 去掉固定的內(nèi)容高度

使用font-size:0;可以去掉內(nèi)容的固定高度。

em{
    border-width: 50px;
    border-color: transparent transparent transparent #f40;
    border-style: solid;
    font-size: 0;
}
2. 將內(nèi)聯(lián)元素轉(zhuǎn)化為塊級(jí)元素或者行內(nèi)塊元素
em{
    border-width: 50px;
    border-color: transparent transparent transparent #f40;
    border-style: solid;
    display: block;   /*也可以是inline-block*/
}
3. 將元素脫標(biāo)（如果涉及特殊的布局可以直接使用）
/*脫標(biāo)*/
em{
    border-width: 50px;
    border-color: transparent transparent transparent #f40;
    border-style: solid;
    position: absolute;
    top:0;
    left:0;
}

/*or 浮動(dòng)*/
em{
    border-width: 50px;
    border-color: transparent transparent transparent #f40;
    border-style: solid;
    float:left;
}
最終代碼

下面就是兼容了IE6版本的三角代碼。

div{
    width:0px; /*設(shè)置寬高為0*/
    height:0px;/*可不寫*/
    border-width:10px;   /*數(shù)值控制三角的大小，垂直的位置*/
    border-color:#f00 transparent transparent transparent;/*上右下左，transparent是透明的*/
    border-style:solid dashed dashed dashed;/*設(shè)置邊框樣式，dashed是兼容IE6寫的*/
    overflow:hidden;/*兼容IE6最小高度不為0寫的*/
}

改變border-width,三角變大，是不失真的。很清晰。

==三角制作完成。==

擴(kuò)展 有角度的三角

上面制作的都是45度的三角，三角可以通過border的高度寬度確定角度。

比如這樣一個(gè)三角，只需要確定上下的和左右的寬度不一樣即可。

div{
    width: 0px;
    height: 0px;
    margin: 100px auto;
    border-width:10px 30px;
    border-color:transparent transparent transparent red;
    border-style:solid;
}
有一個(gè)角是直角的三角

觀察可以看到，是上面和右面的三角同時(shí)設(shè)置成一個(gè)顏色。就會(huì)出現(xiàn)直角的三角。

div{
    width: 0;
    border-width: 20px 10px;
    border-style: solid;
    border-color: red red transparent transparent;
}
箭頭

其實(shí)原理也簡(jiǎn)單，就是兩個(gè)三角重疊在一起。上面的三角就是背景的顏色
對(duì)話框

這個(gè)使用偽元素去做就很方便。




早安，哈哈！今天天氣不錯(cuò)，很好！
兼容IE8的小圓角矩形

原理就是一個(gè)矩形，上面和下面使用偽元素設(shè)置。

before是方向朝上的梯形，after是方向朝下的梯形。

注意不要太寬了，否則會(huì)變成切邊矩形，這樣就可以避免border-radius的兼容問題
利用css3旋轉(zhuǎn)來制作三角形

如果可以用到css3，也可以使用到transform的rotate屬性

大概原理圖就是：
將里面的旋轉(zhuǎn)45度，外面的overflow:hidden即可

最終效果圖是：

@version1.0——2018-11-8——?jiǎng)?chuàng)建《CSS三角的寫法（兼容IE6）》

?burning_韻七七

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/114184.html

相關(guān)文章

  • CSS三角的寫法（兼容IE6）

    摘要：而且如果上面沒有塊元素的時(shí)候，是從內(nèi)聯(lián)元素的內(nèi)容開始算起的，所以上面的就會(huì)到瀏覽器可視區(qū)域的上面。 目錄 簡(jiǎn)介 優(yōu)點(diǎn) 原理 1. 先創(chuàng)建一個(gè)div 2. 然后給div設(shè)定邊框。 3. 給div的四個(gè)邊框都設(shè)置不同的顏色 4. 把寬度和高度都變成0 5. 其余角為透明 6. 兼容IE6瀏覽器 造成這樣的原因是： 最簡(jiǎn)單的解決辦法：(后面添加) 其他的解決辦法： 7. 解決...

    LeexMuller 評(píng)論0 收藏0

  • CSS三角的寫法（兼容IE6）

    摘要：而且如果上面沒有塊元素的時(shí)候，是從內(nèi)聯(lián)元素的內(nèi)容開始算起的，所以上面的就會(huì)到瀏覽器可視區(qū)域的上面。 目錄 簡(jiǎn)介 優(yōu)點(diǎn) 原理 1. 先創(chuàng)建一個(gè)div 2. 然后給div設(shè)定邊框。 3. 給div的四個(gè)邊框都設(shè)置不同的顏色 4. 把寬度和高度都變成0 5. 其余角為透明 6. 兼容IE6瀏覽器 造成這樣的原因是： 最簡(jiǎn)單的解決辦法：(后面添加) 其他的解決辦法： 7. 解決...

    zhisheng 評(píng)論0 收藏0

  • 追求極致--純css制作三角、圓形按鈕，兼容ie6

    摘要：參考了天貓微博等網(wǎng)站的做法，用純和實(shí)現(xiàn)，效果還是不錯(cuò)的。宋體三角形圓形提示盒子用做的提示盒子，上三角是純，盒子圓角用到用做的提示盒子，上三角是純，盒子圓角用到 參考了天貓、微博等網(wǎng)站的做法，用純html和css實(shí)現(xiàn)，效果還是不錯(cuò)的。 以下是成果，兼容主流瀏覽器，包括ie6。 showImg(http://dtop.powereasy.net/UploadFiles/Article/2...

    shevy 評(píng)論0 收藏0

  • 使用css實(shí)現(xiàn)全兼容的三角形

    摘要：基本原理大同小異，這里主要介紹利用當(dāng)然還可以使用的旋轉(zhuǎn)技術(shù)實(shí)現(xiàn)，由于兼容性問題這里不涉及了。利用是一種常用而且簡(jiǎn)單兼容的方式 在當(dāng)前流行的的網(wǎng)站上，我們經(jīng)常會(huì)看到一些小三角形的下拉提示（微博頂部的下拉菜單），簡(jiǎn)單的方式可以使用一張圖片代替，但是隨著前端技術(shù)的發(fā)展，以及開發(fā)者對(duì)于前端性能的吹毛求疵，越來越多的前端開發(fā)者開始返璞歸真，在能不使用圖片的場(chǎng)景中減少圖片使用，css圖標(biāo)相對(duì)于圖片...

    zzbo 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

LMou

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<