<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;