如何用html制作三角形,CSS怎么绘制三角形？

我们在平时的前端开发的时候，有时候是需要一些小图形来丰富一下页面效果，比如：下拉列表的倒三角图形。那么这样的一个三角形是如何制作出来的？下面本篇文章就来给大家介绍一下使用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;

}

效果图：