css3实现三角形（上下左右）

实现三角形的绘制很简单。

第一步：新建一个div。

<div class="kailong"></div>

第二步：为盒子添加样式。

1.向上

.kailong{

width:0;

height:0;

border-right:50px solid transparent;

border-left:50px solid transparent;

border-bottom:50px solid red;

}

2.向下

.kailong{

width:0;

height:0;

border-right:50px solid transparent;

border-left:50px solid transparent;

border-top:50px solid red;

}

3.向左

.kailong{

    width:0;

    height:0;

    border-top:50px solid transparent;

    border-bottom:50px solid transparent;

    border-right:50px solid red;

}

4.向右

.kailong{

    width:0;

    height:0;

    border-top:50px solid transparent;

    border-bottom:50px solid transparent;

    border-left:50px solid red;

}

至此css3实现三角形的绘制完成了。

————————————————

版权声明：本文为CSDN博主「前端小怪兽-凯龙」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/qq_34382449/article/details/81234653