純CSS制作空心三角形和實心三角形及其實現原理

　　　　在一次項目中需要使用到空心三角形，我瞬間懵逼了。查閱了一些資料加上自己的分析思考，終於是達到了效果，個人感覺制作三角形是使用頻率很高的，因此記錄下來，供以后查閱參考。達到了效果如圖：　　

　　　　　　　　　　                  　　　　DOM結構如圖：　　　　

　　　　　　CSS代碼如下：

/*  給矩形一個1px實心顏色rgb為#E4E4E2的邊框  */
.dynamicTime {
    width: 125px;
    height: 40px;
    border: 1px solid #E4E4E2;
    margin-left: 20px;
    position: relative;
        display: inline-block;
        vertical-align: middle;
}
/*    上下透明，右邊框為10px   */
.dynamicTime:before {
    content: '';
    position: absolute;
    top: 10px;
    left: -10px;
    width: 0;
    height: 0;
    border-right: 10px solid #E4E4E2;
    border-bottom: 10px solid transparent;
    border-top: 10px solid transparent; 
}
/*  上下透明，右邊框為9px且在:before偽元素三角形的基礎上，向右，下移動了1px  */
.dynamicTime:after {
    content: '';
    position: absolute;
    top: 11px;
    left: -9px;
    width: 0;
    height: 0;
    border-bottom: 9px solid transparent;
    border-right: 9px solid #fff;
    border-top: 9px solid transparent; 
}        

　　　　為便於寫出方向向上下左右的空心三角形，我分別寫出了各個方向的空心三角形，分析思考其中的實現原理。現總結如下：①空心三角原理：主要利用偽元素(:before,:after)實現， :before產生的是一個實心的#E4E4E2的三角形，而after產生的是實心的白色的三角形，將其覆蓋。因此三角形線的粗細是由覆蓋了多少決定的，即二者left,top的差值（特別注意：向左的空心三角形需要同時向右和下移，如上例子，向右的空心三角形需要同時向左和下移。向上的空心三角形只需要向下移就可以了，向下的空心三角形同理），border的四個方向的值大小只改變角度大小，不改變線的粗細。感興趣的可以自己參考我的總結，自己動手測試，感受會更加深刻。

　　　　那么實心的三角形怎么做呢？  其實實心三角形的CSS代碼，只需將相應方向的三角形樣式的after偽類刪除，即可得到實心三角形.如我需要向左的實心三角形：

.dynamicTime {
    width: 125px;
    height: 40px;
    border: 1px solid #E4E4E2;
    margin-left: 20px;
    position: relative;
}
.dynamicTime:before {
    content: '';
    position: absolute;
    top: 10px;
    left: -10px;
    width: 0;
    height: 0;
    border-right: 10px solid #E4E4E2;
    border-bottom: 10px solid transparent;
    border-top: 10px solid transparent; 
}

　　　　這樣就OK了， 是不是很簡單。哈哈哈哈。。。。。。。（心理活動：MD智障）。