html 三角形容器,css如何画三角形？

我们在平时的前端开发的时候，有时候是需要一些小图形来丰富一下页面效果，比如：下拉列表的倒三角图形。那么这样的一个三角形是如何制作出来的。下面本篇文章就来给大家介绍一下使用css如何画三角形的方法，希望对大家有所帮助。

利用css的border属性，即可实现三角形的绘制。原理：css盒模型

一个盒子模型包括: margin+border+padding+content，上下左右边框交界处出呈现平滑的斜线。利用这个特点，通过设置不同的上下左右边框宽度或者颜色可以得到小三角, 小梯形等，调整宽度大小可以调节三角形形状.

实际上，元素的border是由三角形组合而成，为了说明这个问题，我们可以增大border的宽度，并为各border边设置不同的颜色：.demo {

height:20px;

width:20px;

border-color:#FF9600 #3366ff #12ad2a #f0eb7a;

border-style:solid;

border-width:20px;

}

效果图：

当把height和width都设置成0后，得到：

我们将惊奇地发现，此时元素由上下左右4个三角形“拼接”而成；那么，为了实现最终的效果，即保留最上方的三角形，还应该怎么做？很简单，我们只需要把其它border边的颜色设置为白色或透明色，就可得到一个三角形：

完整代码：

.demo {

height: 0px;

width: 0px;

border-color: #FF9600 transparent transparent transparent;

border-style: solid;

border-width: 20px;

}