使用css画三角形，首先想到的思路是：利用border边框样式来实现，这是由于border的边框是由四个三角形组成的。
<style>
.dom{
width: 0px;
height: 0px;
border-width: 50px;
border-style: solid;
border-color: red green blue brown;
}
</style>
<!--宽度为100px-->
<div class="dom"></div>
<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>
<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>
<style>
.dom{
width: 0px;
height: 0px;
border-width: 40px;
border-style: solid;
border-color: transparent green transparent transparent;
}
</style>
<div class="dom"></div>
<style>
.dom{
width: 0px;
height: 0px;
border-width: 40px;
border-style: solid;
border-color: transparent transparent transparent brown;
}
</style>
<div class="dom"></div>
资源网站大全 https://55wd.com 设计导航https://www.wode007.com/favorites/sjdh
<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>
纯css如何绘制三角形_利用border实现画三角形的原理方法
原文：https://www.cnblogs.com/ypppt/p/13258258.html