css绘制三角形 border

目录

一、深入理解border

1、border 简写属性在一个声明设置所有的边框属性。

可以按顺序设置如下属性：
border-width
border-style
border-color
如果不设置其中的某个值，也不会出问题。

2、border边框的数量不是固定四个。
可参考：border-left、border-right、border-top、border-bottom深入理解
简单来说：
可分为模块（eg：div）有宽高、宽高有一个为0、宽高都为0
1）有宽高

• 4个border时：等腰梯形

.box {
   
    border-right: 55px solid red; 
    width: 200px; height: 200px; 
    border-bottom: 55px solid blue;
    border-left: 55px solid yellow;
    border-top: 55px solid green;
}

• 3个border时：缺口部分不再是斜的，变成了水平线。
  
• 同理当只有2个border时，切口全部变成水平或者垂直

2）宽高有一个为0

.box {
   
    border-right: 55px solid red; 
    width: 200px; height: 200px; 
    border-bottom: 55px solid blue;
}

.box