css 边框箭头和三角形写法

<style>
span{padding:0px;margin:0px;line-height: 0px;display: block;}
.bor1{width:500px;height:80px;line-height: 20px;
border-top: 2px solid #EEB422;
       border-right: 2px solid #C0FF3E;
       border-bottom: 2px solid #A020F0;
       border-left: 2px solid #ADB8A3;
}
.bor2{
width: 0;
       height: 0;
       border-top: 20px solid #EEB422;
       border-right: 20px solid #C0FF3E;
       border-bottom: 20px solid #A020F0;
       border-left: 20px solid #ADB8A3;
}
.bor3{
width: 0;
       height: 0;
       border-top: 40px solid #EEB422;
       border-right: 20px solid #C0FF3E;
       border-bottom: 40px solid #A020F0;
       border-left: 20px solid #ADB8A3;
}
.bor4{
width: 0;
       height: 0;
       
       border-top: 20px solid transparent;
    
       border-bottom: 20px solid transparent;  
       border-left: 20px solid #7CFC00;
}
.bor5{width:0;height:0;
border-top: 20px solid transparent;
    
       border-bottom: 20px solid transparent;  
       border-right: 20px solid #7CFC00;
}
.bor6{width:0;height:0;
       border-top: 20px solid #7CFC00;
       border-left: 20px solid transparent;
    
       border-right: 20px solid transparent;  
}
.bor7{width:0;height:0;
       border-bottom: 20px solid #7CFC00;
       border-left: 20px solid transparent;
    
       border-right: 20px solid transparent;  
}
.bor8{
width:0;height:0;
border-top: 20px solid transparent;

        border-right: 20px solid #C0FF3E;
}
.bor9{
width:0;height:0;
border-top: 20px solid transparent;

        border-left: 20px solid #C0FF3E;
}
.bor10{
width:0;height:0;
border-right: 20px solid transparent;

        border-top: 20px solid #C0FF3E;
}
.bor11{
width:0;height:0;
border-left: 20px solid transparent;

        border-top: 20px solid #C0FF3E;
}
</style>

border边框线的样式并不是长方形的

如上边线放大是一个四边形下窄上宽的，其他边线也是一样的。
这样呢，当宽高都为0时，并显示为块时，样子如下。中心到四边是四边框的宽

四边一样边框会显示正三角形。

上边三角形指向下，下边三角形指向上。正好是相反的指向。

改变边框宽显示会不一样

当把上下边框设置为透明左边框有颜色，左边框会是一个右箭头

当把上下边框设置为透明右边框有颜色，右边框会是一个左箭头

当把左右边框设置为透明上边框有颜色，上边框会是一个下箭头

当把左右边框设置为透明下边框有颜色，下边框会是一个上箭头

border边框显示三角形，方向和边框是相反的

边框的三角形显示和其两邻边有关显必须设置为透明。

右下角三角形：

border-top: 20px solid transparent;

border-right: 20px solid #C0FF3E;

左下角三角形：

border-top: 20px solid transparent;

border-left: 20px solid #C0FF3E;

左上角三角形：

border-right: 20px solid transparent;

border-top: 20px solid #C0FF3E;

右上角三角形：

border-left: 20px solid transparent;

border-top: 20px solid #C0FF3E;

border解析：

任何一边框会影响到其相邻边框的显示：

当上边为0左右边会显示为直角

当右边为0上下边会显示为直角

当下边为0左右边会显示为直角

当左边为0上下边会显示为直角

显示任意连接两边框会显示为正方形，再并其一显示为透明会是一个直角三角形，也就是上右下左

当四边框设置一样的宽，颜色不同。会显示正方形;

如在中心画个十字线，分成八份;

也就是八个直角三角形，也就是二对上下左右方向的三角形;

所以四个角的三角形有两种写法