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的所画直线的交叉点为四个角的连接点。

最进在读CSS权威指南和JQuery的源码 有一起的小伙伴吗？
欢迎加入QQ群:598303111

99 和 100分差的不只是1分 而是一个境界

magazine-unlock-01-2.3.933-_b37f85ba140647ce9693d.jpg