css小箭头-css+div 构建三角形（箭头）

我在很多网站上都看到过这样的箭头

，之前我还以为是图片css小箭头，直到今天才知道可以用css来做。 一开始我对代码不太理解css小箭头，但是尝试了几次后我恍然大悟。 发布并分享。 （高手请无视）

先看代码：

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

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

完成了，最终的优化意见已经很详细了。