用CSS border畫出三角形

最近才知道的小技巧，先看看一般的border如何呈現：

可以看出邊界的交界處會呈現斜線的狀態，利用這點，搭配將border-color設為透明(transparent)就可以畫出三角形的效果，不過要注意ie6以下不支援transparent屬性。

還可以利用border的寬度及元件大小來調整交界位置，組合出不一樣的多邊形。

剩下的就是發揮創意去應用了，像是對話框上方的小三角甚至可以用pseudo element來達成：

.cbox:before {
    position: absolute;
    top: -7px;
    left: 9px;
    display: inline-block;
    border: 7px solid transparent;
    border-bottom-color: #ccc;
    border-top-width: 0;
    content: '';
}
.cbox:after {
    position: absolute;
    top: -6px;
    left: 10px;
    display: inline-block;
    border: 6px solid transparent;
    border-bottom-color: white;
    border-top-width: 0;
    content: '';
}

參考來源：A cross-browser callout box using CSS border triangles. For ie6 too!以及Bootstrap的Dropdown menus