CSS三角的寫法（兼容IE6）

目錄

• 簡介
• 優勢
• 原理
  • 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);
}
複製代碼

2. 若是是解決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>
複製代碼

對話框

這個使用僞元素去作就很方便。

<style type="text/css"> div{ width: 150px; padding: 10px; line-height: 20px; color: #9c623f; background-color: rgba(255, 236, 193, 0.72); border-radius: 10px; position: relative; } div::before{ content:""; border-width: 10px; border-color:transparent rgba(255, 236, 193, 0.72) transparent transparent; border-style: solid; position: absolute; left: -20px; top: 10px; } </style>

<div class="select-toast">早安，哈哈！今每天氣不錯，很好！</div>
複製代碼

兼容IE8的小圓角矩形

原理就是一個矩形，上面和下面使用僞元素設置。

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

注意不要太寬了，不然會變成切邊矩形，這樣就能夠避免border-radius的兼容問題

<style type="text/css"> div{ width: 140px; height: 40px; background-color: rgb(244,121,128); position: relative; } div:before, div:after { content: ""; position: absolute; left: 0; right: 0; border-style: solid; } div:before { top: -3px; border-width: 0 3px 3px; border-color: transparent transparent red; } div:after { bottom: -3px; border-width: 3px 3px 0; border-color: red transparent transparent; } </style>

<div></div>
複製代碼

利用css3旋轉來製做三角形

若是能夠用到css3，也可使用到transform的rotate屬性

大概原理圖就是： 將裏面的旋轉45度，外面的overflow:hidden便可

<style type="text/css"> i,s{ text-decoration: none; font-style: normal; display: block; width: 20px; height: 20px; } i{ position: relative; overflow: hidden; } s{ position: absolute; top:-14px; background: yellowgreen; -webkit-transform: rotate(45deg); transform: rotate(45deg); } </style>

<!--html結構-->
<i>
	<s></s>
</i>
複製代碼

最終效果圖是：

@version1.0——2018-11-8——建立《CSS三角的寫法（兼容IE6）》

©burning_韻七七