关键是你怎么理解border
<style>
div{
width: 50px;
height: 50px;
border-top: 30px solid #000;
border-right: 30px solid #ff0000;
border-left: 30px solid #00ff00;
border-bottom: 30px solid #0000ff;
}
</style>
<div>
</div>
结果如图。为啥结果是这样的呢？边角为啥是各占一半颜色呢？这样公平！
image.png
去掉对border-bottom的设置结果如下
image.png
不去掉bottom但设置宽度为0
image.png
设置宽度和高度都为0
image.png
那么怎么画三角？
显然，设置其中三个颜色为透明就可以了
<style>
div{
width: 0px;
height: 0px;
border-top: 30px solid transparent;
border-right: 30px solid transparent;
border-left: 30px solid transparent;
border-bottom: 30px solid #0000ff;
}
</style>
<div>
</div>
结果
image.png
本质上是一个border如何处理交界处的问题
