效果图

1. html

父元素下存放四个span标签，分别代表四个边框

<!--数据统计 -->
      <el-col class="dataCount">
        <span class="border"></span>
        <span class="border"></span>
        <span class="border"></span>
        <span class="border"></span>
      </el-col>

2. css

父元素使用position：relative定位，占有位置，不会出现布局错乱的情况
子元素使用position：absolute定位，子绝父相，使子元素相对于父元素.dataCount定位
**使用border实现边框样式，例如：
使用top和left控制边框的位置，
再使用border-top和border-left控制边框的粗细,
给盒子width和height控制边框的长短，
**

// 数据统计
    .dataCount {
      position: relative;
      // 边框四角
      .border {
        position: absolute;
      }
      .border:nth-child(1) {
        top: 0;
        left: 0;
        border-top: 2px solid #00d6ec;
        border-left: 2px solid #00d6ec;
        width: 10px;
        height: 10px;
      }
      .border:nth-child(2) {
        top: 0;
        right: 0;
        border-top: 2px solid #00d6ec;
        border-right: 2px solid #00d6ec;
        width: 10px;
        height: 10px;
      }
      .border:nth-child(3) {
        bottom: 0;
        left: 0;
        border-bottom: 2px solid #00d6ec;
        border-left: 2px solid #00d6ec;
        width: 10px;
        height: 10px;
      }
      .border:nth-child(4) {
        bottom: 0;
        right: 0;
        border-bottom: 2px solid #00d6ec;
        border-right: 2px solid #00d6ec;
        width: 10px;
        height: 10px;
      }
    }