纯css如何绘制三角形_利用border实现画三角形的原理方法
使用css画三角形，首先想到的思路是：利用border边框样式来实现，这是由于border的边框是由四个三角形组成的。
首先生成一个带边框宽高为0的div：
<style>
.dom{
width: 0px;
height: 0px;
border-width: 50px;
border-style: solid;
border-color: red green blue brown;
}
</style>
<!--宽度为100px-->
<div class="dom"></div>效果如下：
取消其它三边的颜色形成三角形：
这里我们利用transparent的透明颜色来代替。就可以实现了。如下：
1、css向下三角形：
<style>
.dom{
width: 0px;
height: 0px;
border-width: 40px;
border-style: solid;
border-color: red transparent transparent transparent;
/*或者border-color: transparent transparent red;*/
}
</style>
<div class="dom"></div>效果：
2、css向上三角形：
<style>
.dom{
width: 0px;
height: 0px;
border-width: 40px;
border-style: solid;
border-color: transparent transparent blue transparent;
/*或者border-color:blue transparent transparent*/
}
</style>
<div class="dom"></div>效果：
3、css向左三角形：
<style>
.dom{
width: 0px;
height: 0px;
border-width: 40px;
border-style: solid;
border-color: transparent green transparent transparent;
}
</style>
<div class="dom"></div>效果：
4、css向右三角形：
<style>
.dom{
width: 0px;
height: 0px;
border-width: 40px;
border-style: solid;
border-color: transparent transparent transparent brown;
}
</style>
<div class="dom"></div>效果：
css如何实现边框的三角形呢？
上面实现的三角形都是没有带边框的，如果在需求中需要实现带边框的三角形改如何实现呢？思路为：思路是将两个三角形叠加在一起，外层三角形稍大一些，颜色设置成边框所需的颜色；内层三角形绝对定位在里面。整体就能形成带边框三角形的假象。
以css向上带边框三角形为例：
<style>
.dom{
width: 0px;
height: 0px;
border-width:0 40px 40px;
border-style: solid;
border-color: transparent transparent #333;
position: relative;
}
.dom:after{
content:"";
display: block;
width: 0px;
height: 0px;
border-width: 0 38px 38px;
border-style: solid;
border-color: transparent transparent red;
position: absolute;
top:1px;
left:-38px;
}
</style>
<div class="dom"></div>效果：
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
