效果圖如圖1所示：（簡單示范，有點丑，莫介意）
PS:兼容IE，FF , chrome ,360安全瀏覽器



先講下原理吧，如圖2所示：

這個div的樣式如下所示：

div{
    width: 0px;
    height: 0px;
    border-width: 20px;
    border-style: solid;
    border-color: lightgreen pink yellow lightblue;
}

解釋：當div的寬高為0時，設border的寬度并設顏色，會發現div像是被分割為4個小三角形，
因此當我們要其中一個小三角時，只需要將其它三個隱藏即可（方法：把那三條邊顏色設為transparent即可）。

上三角：（圖3）

對應的CSS代碼：

#triangle{
    width: 0px;
    height: 0px;
    border-width: 20px;
    border-style: solid;
    border-color: transparent transparent yellow transparent;
}

為了讓它盡可能適應各種瀏覽器，我們多添加幾行代碼（主要是解決IE的兼容問題）：

 1 #triangle{
 2     width: 0px;
 3     height: 0px;
 4     *width: 40px;   
 5     *height: 40px;
 6     font-size: 0;
 7     line-height: 0;
 8     overflow: hidden;
 9     border-width: 20px;
10     border-style: dashed dashed solid dashed;
11     border-color: transparent transparent yellow transparent;
12 }

解釋：
①border-color:transparenttransparentyellowtransparent;
因為我們要的是上三角，根據圖2，我們要保留的是下邊框，故把其他三條邊設為transparent；
②border-style:dasheddashed soliddashed;
把其他三邊設為dashed，是因為IE6不支持透明屬性transparent，故我們把其它三邊的樣式設為
dashed，dashed在邊框寬度很大時，會隱藏。（因為我的電腦沒有ie6，所以沒有實踐過，這一點有點抱歉）
③font-size:0; line-height:0; overflow:hidden;
如果不加這三句，會出現以下效果：

即在IE下，出現的不是三角形，而是梯形。

④最后多加了兩句css hack:* 40px; *height:40px;
當時用IE測試效果時，我發現根本找不到小三角，在網上搜各種博客也搜不到相關問題，后來隨手加了句
width&height的樣式，小三角就出現了，感覺應該是在IE下，div的寬高是包括border的（對于這點還是不太懂，希望有大牛給予解答）。
為了解決IE下的這個問題，我最后就加了這兩句css hack。如果覺得不保險，還可以再加上"_40px; _height:40px;"
PS:① IE6和IE7能識別"*"，IE6能識別"_"，具體搜索“CSS hack”。
② *width應設為border-width 的兩倍，*height同理。

對于下三角，左三角，右三角，只需改變上三角中的兩句CSS即可，其他無需改變，改變的代碼分別如下所示。
下三角：

border-style: solid dashed dashed dashed;
border-color: lightgreen transparent transparent transparent;

左三角：

border-style: dashed solid dashed dashed;
border-color: transparent pink transparent transparent;

右三角：

border-style: dashed dashed dashed solid;
border-color: transparent transparent transparent lightblue;

最后，給出效果圖1的代碼：

 1 /* css */
 2 *{
 3     margin: 0px;
 4     padding: 0px;
 5     text-align: center;
 6 }
 7 #container{
 8     position: relative;  //這句很重要，因為小三角是相對父元素#container來絕對定位的
 9     width: 50px;
10     height: 40px;
11     border:1px solid lightblue;
12     margin: 200px auto;
13     padding: 20px;
14  
15 }
16 #chat{
17     width: 50px;
18     height: 40px;
19     background-color: lightblue;
20 }
21 #triangle{
22     position: absolute;   //設置小三角絕對定位
23     width: 0px;
24     height: 0px;
25     *width: 14px;
26     *height: 14px;
27     font-size: 0;
28     line-height: 0;
29     overflow: hidden;
30     border-width: 7px;
31     border-style: dashed dashed dashed solid;
32     border-color: transparent transparent transparent lightblue;
33     top: 33px;   //33px：父元素#container的內邊距20px + #chat寬度的一半20px - 自身元素#triangle的邊寬7px =33px
34     left: 70px;  //70px:  #chat的寬度50px + 父元素#container的內邊距20px =70px
35 }

/* html代碼 */
<div id="container">
    <div id="chat"></div>
    <div id="triangle"></div>
</div>

如有不足之處，歡迎批評建議， O(∩_∩)O謝謝

總結

以上是生活随笔為你收集整理的css实现小三角（原理）的全部內容，希望文章能夠幫你解決所遇到的問題。

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