css画三角形

转载：http://www.mamicode.com/info-detail-1534066.html

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

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

1、画div

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

2、给边框，分开给

.sanjiao{
    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{
    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大小 */
    0;
    height:0;
    /* 防溢出，稳固兼容性 */
    overflow:hidden;
    /* 箭头尺寸 */
    border-10px;
    /* 给箭头着色，四个值分别是边框的四个方向，箭头的方向正好相反 */
    border-color:blue transparent transparent transparent;
    /* 为了兼容性，最好把四个值都补上，需要的方向设实线，其他方向虚线 */
    border-style:solid dashed dashed dashed;
}