CSS三角的寫法（相容IE6）

2021-09-11 13:06:56 字數 3349 閱讀 3174

7. 解決內聯元素的三角顯示問題

最終**

擴充套件

三角的做法有好幾種：

這裡主要介紹的純**寫的。

**寫的三角，不管大小是多少，是不失真的。

**執行比更快。

如果專案中沒有引用字型圖示，**寫是比較可靠的。

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

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



div>


複製**
div


複製**
可以看到效果：

div


複製**
可以看到以下效果：

可以看到兩個border交叉的地方，有斜邊存在。

div


/*也可以這麼寫*/


div複製**
可以看到以下效果：

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

這個就是三角形的由來。

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

div


/*也可以再進行合併*/


div複製**

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

同樣的乙個三角，在ie6的顯示是什麼呢？

造成這樣的原因是：

在ie6下面，如果想把元素例如div設定成19畫素以下的高度就設定不了了。這是因為ie6瀏覽器裡面有個預設的高度，ie6下這個問題是因為預設的行高造成的。

最簡單的解決辦法：(後面新增)
div


複製**
其他的解決辦法：

查了查網上的，如果是ie6不支援transparent, 可以這麼做：

div


複製**
所以我覺得用在這裡也可以，but沒有親測過，如果哪位小可愛測過可以請告知我^ ^。

div


複製**
如果是解決ie6的高度問題(也可以前面加下劃線，表示相容的ie6)

div


複製**
為什麼會有這個問題

因為我們剛才用去製作三角，當然我們經常會使用或者偽元素去做一些小圖示。那麼在顯示上面，可能會有問題。 下面的**：



emstyle>


em>


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

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

造成這樣的原因

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

而且如果上面沒有塊元素的時候，是從內聯元素的內容開始算起的，所以上面的border就會到瀏覽器可視區域的上面。

解決辦法

這個有很多的辦法：

1. 去掉固定的內容高度

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

em


複製**
2. 將內聯元素轉化為塊級元素或者行內塊元素
em


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


em/*or 浮動*/


em複製**
下面就是相容了ie6版本的三角**。

div


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

==三角製作完成。==

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

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

div


複製**

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

div


複製**

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

type="text/css">


.san 


.si 


style>


class="san">


class="si">


div>


div>


複製**

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

type="text/css">


divdiv


::before


style>


class="select-toast">早安，哈哈！今天天氣不錯，很好！div>


複製**
原理就是乙個矩形，上面和下面使用偽元素設定。

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

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

type="text/css">


divdiv


:before,


div:after 


div:before 


div:after 


style>


div>


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

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

type="text/css">


i,s	i


sstyle>


s>


i>


複製**
最終效果圖是：

@version1.0——2018-11-8——建立《css三角的寫法（相容ie6）》

css實現三角箭頭（相容IE6

純css實現三角箭頭有幾種方式，常規的方式用css3的rotate把元素旋轉45度角，無法相容ie的主要原因是ie不支援邊框透明，第二種方法，使用chroma濾鏡透明，經嘗試在ie下會出現activex的安全提示，基本不可行，第三種是用boder style dashed，這種方法效果比較完美，美中...

純css製作三角 圓形按鈕，相容ie6

原文 以前一直用做小三角 圓形按鈕等，但有時候實在不太方便，例如換個顏色又要開啟ps弄，挺麻煩的。而且對於追求細節和極致的前端工程師來說，能不用就不用，於是參考了天貓 微博等 的做法，用純html和css實現，效果還是不錯的。以下是成果，相容主流瀏覽器，包括ie6。是 執行 編輯 檢視源 資源新增嚮...

使用css製作三角，相容IE6，用到的標籤

使用css來製作三角，在日常用得較多。恰好這幾天專案中有用到，之前只是從網上copy下來 直接用，但是今天在用的時候遇到一些問題，於是藉此機會把這個css繪製三角好好研究下吧。我們分別寫乙個,標籤，並給上下左右四個border賦值不同的顏色，看看是什麼樣子 html css 在chrome下如圖 在...