1、新建一個元素，將它的寬高都設置為0；然后通過設置border屬性來實現三角形效果，下面是css繪制三角形的原理：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .caret{ height:0;/*將寬高都設置為0*/ width:0; border:100px solid #000; border-color:red green yellow blue; } p{color:red;} </style> </head> <body> <div class="caret"></div> <p> 將寬高都設置為0<br/> border-color:red green yellow blue;將變寬四個方向顏色設置成不同的顏色以便觀察 </p> </body> </html>
效果:(為了jsfiddle防止被屏蔽,上面已插入了源代碼)
從上面的效果可以看到，四個三角形拼成了一個正方形，我們只要把其中一個想要的三角形保留下來，其他的設置為透明的，就可以達到想要的效果了；
如border-color：red transparent transparent transparent；就能看到一個紅色三角形
效果：
但是ie6不支持transparent，所以沒有透明效果，這就需要把border-style：solid dashed dashed dashed；實現了透明效果；
2、如果要實現直角對着45度斜線方向的三角形，可以將兩個三角形拼在一起來實現；
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .caret{ height:0;/*將寬高都設置為0*/ width:0; border:100px solid #000; border-color:red green transparent transparent; border-style:solid solid dashed dashed; } p{color:red;} </style> </head> <body> <div class="caret"></div> <p> border-color:red green transparent transparent transparent; border-style:solid solid dashed dashed; </p> </body> </html>
效果:
注意：此方法在ie6中，會有個行高撐開了，需要把行高設置為0，line-heiht:0；
下面用css繪制三角形的原理來繪制一個三角形氣泡
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>除去列表最后一個li的底邊框</title> <style> body,p{margin:0;padding:0;} #container{ margin:0 auto; position:relative; width:400px; height:100px; border:10px solid #81A7FF; } #caret{ position:absolute; width:50px; height:50px; left:100px; bottom:-50px; } .triangle1,.triangle2{ display:block; height:0;/*將寬高都設置為0*/ width:0; line-height:0; border-style:solid dashed dashed dashed; } .triangle1{ border-width:50px; border-color:#81A7FF transparent transparent transparent; } .triangle2{ position: absolute; top:-14px;/*這個數據三角函數是計算出來的*/ border-width:50px; border-color:#fff transparent transparent transparent; } p{color:#81A7FF;text-align: center;line-height: 100px;} </style> </head> <body> <div id="container"> <div id="caret"> <span class="triangle1"></span> <span class="triangle2"></span> </div> <p> css繪制三角形氣泡 </p> </div> </body> </html>
效果：
.triangle2的top值不能直接是10px，不然顯示的三角形邊框會小於10，會導致氣泡部分小於容器div元素的邊框（border-width）；top值的計算：（border-width）*(border-width)/(（border-width）*sin45)