關(guān)鍵是你怎么理解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>
結(jié)果如圖捌木。為啥結(jié)果是這樣的呢付燥？邊角為啥是各占一半顏色呢欺劳？這樣公平筝闹！
image.png
去掉對(duì)border-bottom的設(shè)置結(jié)果如下
image.png
不去掉bottom但設(shè)置寬度為0
image.png
設(shè)置寬度和高度都為0
image.png
那么怎么畫三角？
顯然肋乍，設(shè)置其中三個(gè)顏色為透明就可以了
<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>
結(jié)果
image.png
本質(zhì)上是一個(gè)border如何處理交界處的問題
