css3实现三角形

来源：互联网发布：mac 涂鸦软件编辑：程序博客网时间：2024/06/07 01:34

总结：向哪个方向就没有那个方向的border，相邻边为透明，对边为三角形添加需要颜色。

①向上

.arrow-up {

    width:0;

    height:0;

    border-right:50px solid transparent;

    border-left:50px solid transparent;

 border-top:50px solid red;

}

②向下

.arrow-down {

    width:0;

    height:0;

    border-right:50px solid transparent;

    border-left:50px solid transparent;

 border-bottom:50px solid red;

}

③向左

.arrow-left {

    width:0;

    height:0;

    border-top:50px solid transparent;

    border-bottom:50px solid transparent;

    border-right:50px solid red;

}

④向右

.arrow-right {

    width:0;

    height:0;

    border-top:50px solid transparent;

    border-bottom:50px solid transparent;

    border-left:50px solid red;

}

0 0