css设置4个角线

给元素的4个角做角线效果如下：

html代码：

<div class="list corner">
    <div class="title"><span>实验内容</span></div>
    <ul>
        <li>实物图片</li>
        <li>实验介绍</li>
        <li>实验原理</li>
        <li>学习目标</li>
        <li>练习题</li>
        <li>实验指导书</li>
    </ul>
    <div class="boxfoot"></div>
</div>

css代码：

.corner::before {
      position: absolute;
      content: "";
      top: 0;
      left: 0;
      width: 20px;
      height: 20px;
      // border-top: 2px solid #02a6b5;
      border-top: 2px solid #409eff;
      border-left: 2px solid #409eff;
    }
    .corner::after {
      position: absolute;
      content: "";
      top: 0;
      right: 0;
      width: 20px;
      height: 20px;
      border-top: 2px solid #409eff;
      border-right: 2px solid #409eff;
    }
    .corner {
      position: relative;
      .boxfoot::before {
        position: absolute;
        content: "";
        bottom: 0;
        left: 0;
        width: 20px;
        height: 20px;
        border-bottom: 2px solid #409eff;
        border-left: 2px solid #409eff;
      }
      .boxfoot::after {
        position: absolute;
        content: "";
        bottom: 0;
        right: 0;
        width: 20px;
        height: 20px;
        border-bottom: 2px solid #409eff;
        border-right: 2px solid #409eff;
      }
    }
}