0 單邊的區(qū)域劃分
#dnf{
width: 0;
height: 0;
border: 50px solid #000;
border-top-color: red;
}
<div id="dnf"></div>
image.png
可以利用這一特性去組合自己想要的形狀
增加下述樣式
border-left-color: red;
border-right-color: transparent;
border-bottom-color: transparent;
image.png
1 當(dāng)寬度不相等的時候
#dnf{
width: 0;
height: 0;
border-style: solid;
border-color: #000;
border-top-color: red;
border-left-color: red;
border-top-width: 50px;
border-left-width: 50px;
border-right-width: 150px;
border-bottom-width: 80px;
}
image.png
高度等于 border-top-width + border-bottom-width
寬度等于 border-left-width border-right-width
image.png
已border-top 和border-left的所畫直線的交叉點(diǎn)為四個角的連接點(diǎn)。
99 和 100分差的不只是1分 而是一個境界
