实现三角形的绘制很简单。
第一步:新建一个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