css實現三角形的原理是：當元素的寬高為0，邊框(border)不為0時，四個角邊框交界重疊處分45度角平分。

如果4種顏色只保留一種顏色，余下3種顏色設置為透明（或者設置為和背景色相同的顏色），就出現一個小三角了。

只保留上面的顏色，如下圖：

display: inline-block;width: 0;height: 0;border-top: 20px solid #639;border-right: 20px solid transparent;border-left: 20px solid transparent;border-bottom:0px solid transparent;

IE6不兼容transparent, 左右border由 solid改為dashed.

?

display: inline-block;width: 0;height: 0;border-top: 20px solid #639;border-right: 20px dashed transparent;border-left: 20px dashed transparent;border-bottom:0px solid transparent;

Bootstrap中三角也是使用css實現。

html代碼：

<span class="caret"></span>
css代碼：

.caret {display: inline-block;width: 0;height: 0;margin-left: 2px;vertical-align: middle;border-top: 4px dashed #333;border-right: 4px solid transparent;border-left: 4px solid transparent; }
但是在IE8下顯示為空白，dashed改為solid。

如果4種顏色只保留一種顏色，余下3種顏色設置為透明（或者設置為和背景色相同的顏色），就出現一個小三角了。

示例3：
只保留上面的紅色，如下圖：

總結

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

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