css使用border畫三角形

前端中的不少地方都會用到三角形，好比tooltip等
CSS中建立三角形的方法不少，能夠參考這裏：

CSS建立三角形（小三角）的幾種方法

比較簡單實用的仍是使用border來建立三角形，今天主要研究這個的實現
將邊框分別設置爲紅/黃/藍/綠

.triangle {
    height: 0;
    width: 0;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    border-color: #ff0000 #ffff00 #0000ff #008000;
    border-style: solid;
    border-width: 40px 40px 40px 40px;
}

效果以下：

四個三角形合成一個正方形，大小爲80x80，若是咱們只想保留其中某個三角形的話，將其它的設置爲透明便可，好比(如下css未改變部分與上面相同)

.triangle {
    border-color: #ff0000 transparent transparent transparent;
    border-width: 40px 40px 40px 40px;
}

效果：

IE6不支持transparent，因此不會透明而會顯示難看的黑色，不過也有解決方法：將透明的部分對應的border-style設爲dashed便可

.triangle {
    border-color: #ff0000 transparent transparent transparent;
    border-style: solid dashed dashed dashed;
    border-width: 40px 40px 40px 40px;
}

正方形按對角線平分爲兩個三角形的狀況

.triangle {
    border-color: #ff0000 #ffff00 #0000ff #008000;
    border-style: solid;
    border-width: 0 0 40px 40px;
}

.triangle {
    border-color: #ff0000 #ffff00 #0000ff #008000;
    border-style: solid;
    border-width: 0 40px 40px 0;
}

須要指出的是，此時正方形的大小爲40x40

若是將border-width的某一邊設爲0又會怎麼樣呢？也算是兩種狀況

.triangle {
    border-color: #ff0000 #ffff00 #0000ff #008000;
    border-style: solid;
    border-width: 40px 40px 0 40px;
}

.triangle {
    border-color: #ff0000 #ffff00 #0000ff #008000;
    border-style: solid;
    border-width: 40px 40px 40px 0;
}

結果是長方形，其中一邊爲80一邊爲40。寬度被設爲0的邊框對應方向的邊框會造成較大的三角形，且長度加倍

segmentfault的"採納"的顯示其實也是用三角形實現的

上部分是包含'採納'兩個字的塊狀元素，設置position: relative。下部分用僞類after設置一個position: absolute的塊狀元素，將二者接在一塊兒。經過border-width設置成長方形而不是正方形，再將下方的三角形去掉便可，看下面的css十分明顯，這也是三角形的一個很好的應用

.accepted-flag:after {
    position: absolute;
    left: 0;
    top: 25px;
    content: '';
    border-width: 9px 18px;
    border-style: solid;
    border-color: #009a61 #009a61 transparent #009a61;
}