利用css绘制出一个三角形的主要思想就是设置boder属性，设置宽高以及颜色。
效果图：
思路：盒子的高度和宽度必须是0，呈现的效果完全是通过盒子的上下左右边框撑起来。
首先四周的边框厚度可以根据自己的需求来调节（我采取的100px），虚实线都可以，都是透明色（后面颜色覆盖）。
首先四个方向（top、bottom、left、right）的boder都设置颜色，为了区分，设置不同的颜色，最终就会呈现上图中第一张图的颜色。
.d{
width: 0;
height: 0;
border: 100px solid transparent;
}
如果只要某一个方向的，比如尖角向上（上图红色），那么就只设置border-bottom-color就可以啦。
.d{
border-bottom-color: #FF4500;
border-top-color: rgb(0, 221, 255);
border-left-color: pink ;
border-right-color: rgb(255, 196, 0);
}完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.d{
/*盒子的高度一定要是0才行*/
width: 0;
height: 0;
/*给盒子的边框设置厚度、实线、透明颜色*/
border: 100px solid transparent;
/*分别设置四个方向的边框*/
border-bottom-color: #FF4500;
border-top-color: rgb(0, 221, 255);
border-left-color: pink ;
border-right-color: rgb(255, 196, 0);
}
</style>
</head>
<body>
<h3>三角形</h3>
<div class="d"></div>
</body>
</html>
感谢阅读，希望对您有所帮助！
扫描二维码关注公众号，回复：
15953090 查看本文章
