0 单边的区域划分
#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 当宽度不相等的时候
#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的所画直线的交叉点为四个角的连接点。
99 和 100分差的不只是1分 而是一个境界
