• 理
• 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)

1. 代碼寫的三角，不管大小是多少，是不失真的。
2. 代碼運(yùn)行比圖片更快。
3. 如果項(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

<div></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;
}

1. 查了查網(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);
}

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

div{
 height:0;
 font-size:0;
 line-height:0;
 overflow:hidden;
}

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

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

因?yàn)槲覀儎偛庞?<div> 去制作三角，當(dāng)然我們經(jīng)常會(huì)使用 <em><i> 或者偽元素去做一些小圖標(biāo)。那么在顯示上面，可能會(huì)有問題。 下面的代碼：

<style>
em{
	width: 0;
	height: 0;
	border-width: 50px;
	border-color: transparent transparent transparent #f40;
	border-style: solid;
}
</style>
<em></em>

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

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

造成這樣的原因

1. 是因?yàn)樾袃?nèi)元素自己有固定的高度，不能設(shè)置寬高為0，所以上面下面都是50px沒有問題，但是中間撐開了距離，也就有了梯形的效果。
2. 而且如果上面沒有塊元素的時(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è)三角重疊在一起。上面的三角就是背景的顏色

<style type="text/css">
.san {
	border-width: 50px;
	border-color: transparent transparent transparent #f40;
	border-style: solid; 
	position: relative;
	}
.si {
	border-width: 30px;
	border-color: transparent transparent transparent #fff;
	border-style: solid; 
	position: absolute;
	left: -50px;
	top: -30px;
}
</style>
<!--html結(jié)構(gòu)-->
<div class="san">
	<div class="si"></div>
</div>

對(duì)話框

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