我们在平时的前端开发的时候,有时候是需要一些小图形来丰富一下页面效果,比如:下拉列表的倒三角图形。那么这样的一个三角形是如何制作出来的?下面本篇文章就来给大家介绍一下使用CSS绘制三角形的方法,希望对大家有所帮助。
在CSS中绘制三角形,可以利用css的border属性,即可实现三角形的绘制。实现三角形的原理:css盒模型。
一个盒子模型包括: margin+border+padding+content,上下左右边框交界处出呈现平滑的斜线。利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三角,小梯形等;调整宽度大小可以调节三角形形状。.demo {
height:20px;
width:20px;
border-color:#FF9600 #3366ff #12ad2a #f0eb7a;
border-style:solid;
border-width:20px;
}
效果图:
当把height和width都设置成0后,得到:
把其他颜色都去掉,只留下橙色后,就得到一个三角形:
完整代码:
border 属性--绘制三角形.demo{
height:0;
width:0;
overflow: hidden;
font-size: 0;
line-height: 0;
border-color:#FF9600 transparent transparent transparent;
border-style:solid dashed dashed dashed;
border-width:20px;
}
效果图: