利用css的border属性，即可实现三角形的绘制。原理：css盒模型
一个盒子模型包括: margin+border+padding+content，上下左右边框交界处出呈现平滑的斜线。利用这个特点，通过设置不同的上下左右边框宽度或者颜色可以得到小三角, 小梯形等，调整宽度大小可以调节三角形形状.
利用CSS的border以及它的属性值transparent来实现三角形，其中最主要的是要明白由于div的高度跟宽度都为0，margin，padding也为0，所以元素框的大小就是border的叠加。
由于相邻boder会重叠，故存在内容宽高时其实任意一边存在的border都是梯形的，当div内容宽高为0时，border就表现为三角形。
将右边框颜色设置为红色，而其他3个border的颜色设置为transparent表示边框透明，就发现三角形出现了，其实这个三角形是右边框。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.demo {
height: 0px;
width: 0px;
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 20px;
}
</style>
</head>
<body>
<div class="demo"></div>
</body>
</html>效果图：
图解
正常的框模型，div的内容width以及height均为50px。黑线划出来的区域就是它的右边框，呈现为一个梯形
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.demo {
height: 50px;
width: 50px;
border-color: red;
border-style: solid;
border-width: 100px;
}
</style>
</head>
<body>
<div class="demo"></div>
</body>
</html>效果图：
当div的内容width以及height均为0。黑线划出来的区域就是它的右边框，呈现为一个三角形
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.demo {
height: 0px;
width: 0px;
border-color: red;
border-style: solid;
border-width: 100px;
}
</style>
</head>
<body>
<div class="demo"></div>
</body>
</html>效果图：
当div的内容width以及height均为0。上下左边框都为透明的时候，只有右边框显示为红色，三角形就看到了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.demo {
height: 0px;
width: 0px;
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 20px;
}
</style>
</head>
<body>
<div class="demo"></div>
</body>
</html>效果图：
以上就是css3如何画三角形？的详细内容，更多请关注0133技术站其它相关文章！
