關鍵是你怎么理解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如何處理交界處的問題
