css实现div的四角边框效果

效果如图

细节可自行修改css内容(角的颜色, 粗细等等)

---

HTML

<div class="topMsgItem" style="position:relative;">    //重点 父级元素要加 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 style="color: #EE6666;">${arr.iptused.used}</span> /
			<span style="color: #FAC858;">${arr.iptused.total}</span> / <span
				style="color: #5470C6;">${arr.ipt.total}</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;
    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);
  }
  .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);
  }