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;
 

    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>
 

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

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

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