纯css制作三角形小记

个人理解,使用css出三角形,其实控制的就是border

纯css制作三角形小记

     下面效果分别是4个方向的三角形:

/*向上*/

    .triangle_border_up{

        width:0;

        height:0;

        border-width:0 30px 30px;

        border-style:solid;

        border-color:transparent transparent #333;/*透明 透明  灰*/

    }
/*向下*/

    .triangle_border_down{

        width:0;

        height:0;

        border-width:30px 30px 0;

        border-style:solid;

        border-color:#333 transparent transparent;/*灰 透明 透明 */

    }
/*向左*/

    .triangle_border_left{

        width:0;

        height:0;

        border-width:30px 30px 30px 0;

        border-style:solid;

        border-color:transparent #333 transparent transparent;/*透明 灰 透明 透明 */

    }
/*向右*/

    .triangle_border_right{

        width:0;

        height:0;

        border-width:30px 0 30px 30px;

        border-style:solid;

        border-color:transparent transparent transparent #333;/*透明 透明 透明 灰*/

    }

    最终效果:

       纯css制作三角形小记

 

你可能感兴趣的:(css)