CSS三角的寫法（相容IE6）

a1burning發表於2018-11-08

CSS

簡介
優點
原理
- 1. 先建立一個div
- 2. 然後給div設定邊框。
- 3. 給div的四個邊框都設定不同的顏色
- 4. 把寬度和高度都變成0
- 5. 其餘角為透明
- 6. 相容IE6瀏覽器
  - 造成這樣的原因是：
  - 最簡單的解決辦法：(後面新增)
  - 其他的解決辦法：
- 7. 解決內聯元素的三角顯示問題
  - 為什麼會有這個問題
  - 解決辦法
    - 1. 去掉固定的內容高度
    - 2. 將內聯元素轉化為塊級元素或者行內塊元素
    - 3. 將元素脫標（如果涉及特殊的佈局可以直接使用）
最終程式碼
擴充套件
- 有角度的三角
- 有一個角是直角的三角
- 箭頭
- 對話方塊
- 相容IE8的小圓角矩形
- 利用css3旋轉來製作三角形

簡介

三角的做法有好幾種：

圖片、精靈圖（網易）

字型圖示（京東）

純程式碼寫（亞馬遜）

這裡主要介紹的純程式碼寫的。

優點

程式碼寫的三角，不管大小是多少，是不失真的。
程式碼執行比圖片更快。
如果專案中沒有引用字型圖示，程式碼寫是比較可靠的。

原理

原理就是使用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;
}
複製程式碼

其他的解決辦法：

查了查網上的，如果是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);
}
複製程式碼

如果是解決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>
複製程式碼

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

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

造成這樣的原因

是因為行內元素自己有固定的高度，不能設定寬高為0，所以上面下面都是50px沒有問題，但是中間撐開了距離，也就有了梯形的效果。

而且如果上面沒有塊元素的時候，是從內聯元素的內容開始算起的，所以上面的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_韻七七

js實現重寫new Date()相容IE6以上
2019-05-11
JS
CSS實現文字豎排顯示（相容IE6/IE7）
2018-08-02
CSS
js中css樣式相容各個瀏覽器寫法
2019-02-11
JSCSS瀏覽器
css寫法
2021-09-11
CSS
css+js美化下拉框（相容IE6、7、8以上主流瀏覽器）
2019-05-11
CSSJS瀏覽器
js 瀏覽器相容css中webkit、Moz、O、ms…寫法封裝(es6語法)
2018-09-07
JS瀏覽器CSSWebKit封裝
Javascript滑鼠滾輪事件相容寫法
2019-04-30
JavaScript事件
讓 A 標籤失效的 CSS 寫法
2020-05-21
CSS
常用CSS縮寫語法
2019-02-01
CSS
css的position-relative相容問題與解決辦法
2019-02-25
CSS
CSS三欄佈局的五種寫法
2018-05-07
CSS
css的三種常用寫法是什麼
2021-09-11
CSS
CSS，我可以寫 if/else 語法了？
2021-11-04
CSS
好程式設計師分享javascript中的常見的相容寫法
2020-04-24
程式設計師JavaScript
css 三角形
2024-11-27
CSS
js上傳圖片預覽，相容IE6以上各大主流瀏覽器
2019-05-11
JS瀏覽器
（16）CSS 擴充：① 瀏覽器相容 | CSS
2020-03-09
CSS瀏覽器
CSS中多個class樣式設定的不同寫法
2018-05-10
CSS
為什麼在vue中寫的css都沒法生效
2019-09-09
VueCSS
CSS 三角形效果
2018-09-17
CSS
CSS 三角形箭頭的矩形
2019-01-21
CSS
噁心的相容問題：完美解決IE(IE6/IE7/IE8)不相容HTML5標籤的問題
2019-02-16
HTML
純css畫三角形
2019-03-12
CSS
CSS繪製三角形
2024-08-23
CSS
寫出你遇到過IE6/7/8/9的BUG及解決方法
2024-11-24
CSS 奇思妙想 | 全相容的毛玻璃效果
2021-06-30
CSS
CSS-Next : CSS前處理器簡單寫法的替代者, 想了解下麼?
2019-03-04
CSS
如何寫高效的CSS？
2024-11-27
CSS
CSS帶有三角形箭頭的矩形
2019-01-21
CSS
CSS實現帶陰影的三角形
2019-03-05
CSS
使用css 畫三角形的三種方法
2024-11-15
CSS
CSS三角形效果詳解
2018-07-14
CSS
用CSS製作三角形.
2018-06-24
CSS
CSS三角形和餅圖
2018-08-02
CSS
純css繪製三角形
2021-09-09
CSS
解決CSS position:fixed 相容問題
2018-08-28
CSS
Javascript 實現 Textarea 自動伸縮，相容IE6、IE7、IE8、IE9...
2019-01-06
JavaScriptIE9
css-製作三角形方法
2020-10-10
CSS