目錄

簡介

優點

原理

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

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

為什么會有這個問題

因為我們剛才用

去制作三角，當然我們經常會使用或者偽元素去做一些小圖標。那么在顯示上面，可能會有問題。

下面的代碼：

em{

width: 0;

height: 0;

border-width: 50px;

border-color: transparent transparent transparent #f40;

border-style: solid;

}

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

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

它實際是這個樣子的。

造成這樣的原因

是因為行內元素自己有固定的高度，不能設置寬高為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;

}

箭頭

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

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

}

對話框

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

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;

}

早安，哈哈！今天天氣不錯，很好！

兼容IE8的小圓角矩形

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

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

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

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;

}

利用css3旋轉來制作三角形

如果可以用到css3，也可以使用到transform的rotate屬性

大概原理圖就是：

將里面的旋轉45度，外面的overflow:hidden即可

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

}

最終效果圖是：

@version1.0——2018-11-8——創建《CSS三角的寫法(兼容IE6)》

?burning_韻七七

總結

以上是生活随笔為你收集整理的css3三角形兼容_CSS三角的写法（兼容IE6）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。