CSS三角的寫法（相容IE6）
阿新 • • 發佈：2018-11-08
目錄
- 簡介
- 優點
- 原理
- 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 可以看到以下效果：
可以看到兩個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_韻七七