利用css伪元素画div的四个直角

效果如图：

html如下：

<!-- pannel就是要被画上四个小直角的div元素-->
<div class="pannel">
   <div class="panel-footer"></div>
</div>

css如下：

.pannel {
     position: relative;
     border: 1px solid rgba(25, 186, 139, 0.17);
     height: 2.998501rem;
     background: url(../images/line.png);
     &::before {
         position: absolute;
         top: 0;
         left: 0;
         content: "";
         width: 10px;
         height: 10px;
         border-top: 2px solid #02a6b5;
         border-left: 2px solid #02a6b5;
       }
       &::after {
         position: absolute;
         top: 0;
         right: 0;
         content: "";
         width: 10px;
         height: 10px;
         border-top: 2px solid #02a6b5;
         border-right: 2px solid #02a6b5;
       }
       .panel-footer{
         position: absolute;
         left: 0;
         bottom: 0;
         width: 100%;
         &::before {
           position: absolute;
           bottom: 0;
           left: 0;
           content: "";
           width: 10px;
           height: 10px;
           border-bottom: 2px solid #02a6b5;
           border-left: 2px solid #02a6b5;
         }
         &::after {
           position: absolute;
           bottom: 0;
           right: 0;
           content: "";
           width: 10px;
           height: 10px;
           border-bottom: 2px solid #02a6b5;
           border-right: 2px solid #02a6b5;
         }
       }
}

背景图片链接：
https://pan.baidu.com/s/17k3KJ3d-G3kopwU1QAiQLg
提取码：ozap