css画三角形原理

关键是你怎么理解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如何处理交界处的问题