css实现div的四⾓边框效果效果如图
细节可⾃⾏修改css内容(⾓的颜⾊, 粗细等等)
HTML
<div class="topMsgItem" >    //重点⽗级元素要加 position:relative;
<div class="angle angle-left-top"></div>  //这⼏个div放在这⾥即可 , 每⼀个div就是⼀个⾓
<div class="angle angle-left-bottom"></div>  //这⼏个div放在这⾥即可 , 每⼀个div就是⼀个⾓
<div class="angle angle-right-top"></div>  //这⼏个div放在这⾥即可 , 每⼀个div就是⼀个⾓
<div class="angle angle-right-bottom"></div>  //这⼏个div放在这⾥即可 , 每⼀个div就是⼀个⾓
<div class="topMsgIten">中继资源</div>
<div class="bottomMsgIten"><span >${arr.iptused.used}</span> /
<span >${al}</span> / <span
>${al}</span>
</div>
</div>
CSS
.angle {
position: absolute;
width: 20px;
height: 20px;
}
.
angle-left-top {
top: 0;
left: 0;
border-left: 4px solid rgba(7,185,255,0.5);
border-top: 4px solid rgba(7,185,255,0.5);
}
.angle-left-top:after{
content: "";
border-radius: 0;
font-size: 0;
width: 0;
height: 0;
position: absolute;
padding: 0;
top:-4px;
right:0;
border-left: 4px solid transparent;
border-right: 4px solid rgba(28,32,122,0.1);
border-bottom: 4px solid rgba(28,32,122,0.1);
}
.angle-left-top:before{
content: "";
border-radius: 0;
font-size: 0;
width: 0;
width: 0;
height: 0;
position: absolute;
padding: 0;
bottom:0;
left:-4px;
border-top: 4px solid transparent;
border-right: 4px solid rgba(28,32,122,0.1);    border-bottom: 4px solid rgba(28,32,122,0.1);  }
.
angle-right-top {
top: 0;
right: -2px;
border-right: 3px solid rgba(7,185,255,0.5);    border-top: 3px solid rgba(7,185,255,0.5);
}
.angle-right-top:after{
content: "";
border-radius: 0;
font-size: 0;
width: 0;
height: 0;
position: absolute;
padding: 0;
bottom:0;
right:-4px;
border-right: 4px solid transparent;
border-left: 4px solid rgba(28,32,122,0.1);
border-bottom: 4px solid rgba(28,32,122,0.1);  }
.angle-right-top:before{
content: "";
border-radius: 0;
font-size: 0;
width: 0;
height: 0;
position: absolute;
padding: 0;
top:-4px;
left:0;
border-top: 4px solid transparent;
border-left: 4px solid rgba(28,32,122,0.1);
border-bottom: 4px solid rgba(28,32,122,0.1);  }
.angle-left-bottom {
bottom: 0;
left: 0;
border-bottom: 4px solid rgba(7,185,255,0.5);    border-left: 4px solid rgba(7,185,255,0.5);
}
.angle-left-bottom:after{
content: "";
border-radius: 0;
font-size: 0;
width: 0;
height: 0;
position: absolute;
padding: 0;
bottom:-4px;
right:0;
border-left: 4px solid transparent;
border-top: 4px solid rgba(28,32,122,0.1);
border-right: 4px solid rgba(28,32,122,0.1);  }
div border属性.angle-left-bottom:before{
.angle-left-bottom:before{
content: "";
border-radius: 0;
font-size: 0;
width: 0;
height: 0;
position: absolute;
padding: 0;
top:0;
left:-4px;
border-left: 4px solid transparent;
border-top: 4px solid rgba(28,32,122,0.1);
border-right: 4px solid rgba(28,32,122,0.1);  }
.angle-right-bottom {
bottom: 0;
right: -2px;
border-right: 4px solid rgba(7,185,255,0.5);    border-bottom: 4px solid rgba(7,185,255,0.5);  }
.angle-right-bottom:after{
content: "";
border-radius: 0;
font-size: 0;
width: 0;
height: 0;
position: absolute;
padding: 0;
bottom:-4px;
left:0;
border-right: 4px solid transparent;
border-top: 4px solid rgba(28,32,122,0.1);
border-left: 4px solid rgba(28,32,122,0.1);
}
.angle-right-bottom:before{
content: "";
border-radius: 0;
font-size: 0;
width: 0;
height: 0;
position: absolute;
padding: 0;
top:0;
right:-4px;
border-right: 4px solid transparent;
border-top: 4px solid rgba(28,32,122,0.1);
border-left: 4px solid rgba(28,32,122,0.1);
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。