• 理
• 1. 先創建一個div
• 2. 然后給div設定邊框。
• 3. 給div的四個邊框都設置不同的顏色
• 4. 把寬度和高度都變成0
• 5. 其余角為透明
• 6. 兼容IE6瀏覽器
• 造成這樣的原因是：
• 最簡單的解決辦法：(后面添加)
• 其他的解決辦法：
• 7. 解決內聯元素的三角顯示問題
• 為什么會有這個問題
• 解決辦法
• 1. 去掉固定的內容高度
• 2. 將內聯元素轉化為塊級元素或者行內塊元素
• 3. 將元素脫標（如果涉及特殊的布局可以直接使用）
• 最終代碼
• 擴展
• 有角度的三角
• 有一個角是直角的三角
• 箭頭
• 對話框
• 兼容IE8的小圓角矩形
• 利用css3旋轉來制作三角形

簡介

三角的做法有好幾種：

• 圖片、精靈圖（網易）
• 字體圖標（京東）
• 純代碼寫（亞馬遜）

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

優點

1. 代碼寫的三角，不管大小是多少，是不失真的。
2. 代碼運行比圖片更快。
3. 如果項目中沒有引用字體圖標，代碼寫是比較可靠的。

原理

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

使用border屬性就可以實現一個兼容性很好的三角圖形效果，其底層受到border-style的inseet/outset影響，邊框3D效果在互聯網早期還是很流行的，。

1. 先創建一個div

<div></div>

2. 然后給div設定邊框。

div{
 width:200px;
 height:100px;
 border:10px solid red; 
}

可以看到效果：

3. 給div的四個邊框都設置不同的顏色

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

可以看到以下效果：

可以看到兩個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;
}

可以看到以下效果：

這個時候就看得很明顯了，出現了四個三角。那如果要出現一個，那么就將其他的三個弄成透明色就可以了。

這個就是三角形的由來。

5. 其余角為透明

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

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

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

6. 兼容IE6瀏覽器

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

造成這樣的原因是：

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

在IE6下面，如果想把元素例如div設置成19像素以下的高度就設置不了了。這是因為IE6瀏覽器里面有個默認的高度，IE6下這個問題是因為默認的行高造成的。

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

div{
 /*不支持transparent*/
 border-style:solid dashed dashed dashed;
 /*高度最小不為0*/
 overflow:hidden;
}

1. 查了查網上的，如果是IE6不支持transparent, 可以這么做：

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

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

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. 解決內聯元素的三角顯示問題

為什么會有這個問題

因為我們剛才用 <div> 去制作三角，當然我們經常會使用 <em><i> 或者偽元素去做一些小圖標。那么在顯示上面，可能會有問題。 下面的代碼：

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

可以看到頁面是這個樣子的:

為什么是這個樣子的，那么我們再看的仔細一點。 它實際是這個樣子的。

造成這樣的原因

1. 是因為行內元素自己有固定的高度，不能設置寬高為0，所以上面下面都是50px沒有問題，但是中間撐開了距離，也就有了梯形的效果。
2. 而且如果上面沒有塊元素的時候，是從內聯元素的內容開始算起的，所以上面的border就會到瀏覽器可視區域的上面。

解決辦法

這個有很多的辦法：

1. 去掉固定的內容高度

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

em{
	border-width: 50px;
	border-color: transparent transparent transparent #f40;
	border-style: solid;
	font-size: 0;
}

2. 將內聯元素轉化為塊級元素或者行內塊元素

em{
	border-width: 50px;
	border-color: transparent transparent transparent #f40;
	border-style: solid;
	display: block; /*也可以是inline-block*/
}

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

/*脫標*/
em{
	border-width: 50px;
	border-color: transparent transparent transparent #f40;
	border-style: solid;
	position: absolute;
	top:0;
	left:0;
}
/*or 浮動*/
em{
	border-width: 50px;
	border-color: transparent transparent transparent #f40;
	border-style: solid;
	float:left;
}

最終代碼

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

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

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

==三角制作完成 。==

擴展

有角度的三角

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

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

div{
	width: 0px;
	height: 0px;
	margin: 100px auto;
	border-width:10px 30px;
	border-color:transparent transparent transparent red;
	border-style:solid;
}

有一個角是直角的三角

觀察可以看到，是上面和右面的三角同時設置成一個顏色。就會出現直角的三角。

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

箭頭

其實原理也簡單，就是兩個三角重疊在一起。上面的三角就是背景的顏色

<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結構-->
<div class="san">
	<div class="si"></div>
</div>

對話框

這個使用偽元素去做就很方便。