css+div打造三角形(箭頭)

在很多網站都見過這樣的箭頭，之前我一直以為是圖片，直到今天才知道原來可以用css做。開始看代碼沒太看懂，后來自己試了幾遍才恍然大悟。貼出來分享下。(大神請直接忽略)

先看代碼：

HTML部分就是一個單純的div。

.sanjiao{
    width:0px;
    height:0px;
    overflow:hidden;
    border-width:10px;
    border-color:transparent transparent blue transparent;
    border-style:dashed dashed solid dashed;
}

咋一看我確實沒明白原因。(看懂的后面可以忽略)

*****************************************************************************************************************

一步步分析：

1、畫div

.sanjiao{
    width:30px;
    height:30px;
    background-color:black;
}

(這一步看不懂的麻煩回去復習css)

2、給邊框，分開給

.sanjiao{
    width:30px;
    height:30px;
    background-color:black;

    border-top:solid red 20px;
    border-left:solid blue 20px;
    border-bottom:solid yellow 20px;
    border-right:solid green 20px;
}

(相信聰明的童靴馬上就看明白了，我也是在這才明白)

3、去掉中間的div

.sanjiao{
    width:0;
    height:0;

    border-top:solid red 20px;
    border-left:solid blue 20px;
    border-bottom:solid yellow 20px;
    border-right:solid green 20px;
}

(是不是已經看懂了)

4、優化代碼

.sanjiao{
    /* 設定div大小 */
    width:0;
    height:0;
    /* 防溢出，穩固兼容性 */
    overflow:hidden;
    /* 箭頭尺寸 */
    border-width:10px;
    /* 給箭頭着色，四個值分別是邊框的四個方向，箭頭的方向正好相反 */
    border-color:blue transparent transparent transparent;
    /* 為了兼容性，最好把四個值都補上，需要的方向設實線，其他方向虛線 */
    border-style:solid dashed dashed dashed;
}

搞定，最后的優化注釋已經很詳細了。

看到這兒還看不懂，不好意思 請找地兒充值IQ。