利用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边的颜色设置为白色或透明色，就可得到一个三角形：
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.demo {
height: 0px;
width: 0px;
border-color: #FF9600 transparent transparent transparent;
border-style: solid;
border-width: 20px;
}
</style>
</head>
<body>
<div class="demo"></div>
</body>
</html>以上就是css如何画三角形？的详细内容，更多请关注0133技术站其它相关文章！
