使用CSS动态创建边角框架

实现逻辑：
通过双伪元素、边框、定位实现

定义一个div容器，如div.container
在容器中定义1个子元素
分别div.container和div.corner添加::before和::after伪类，并将伪类中的元素分别设置成四个边角元素即

结构：

<div class="container">
   <div class="corner"></div>
 </div>

样式：

		  * {
                margin: 0;
                padding: 0;
            }

            .container {
                margin: 200px;
                position: relative;
                width: 400px;
                height: 200px;
                background-image: url('./grid_bg.png');
                background-size: cover;
            }
            
            .container::before,.container::after{
                position: absolute;
                top: 0;
                content: "";
                width: 15px;
                height: 18px;
                border-top: 1px solid rgb(2, 242, 250);
            }
            .container::before{// 左上角
                left: 0;
                border-left: 1px solid rgb(2, 242, 250);
            }
            .container::after{// 右上角
                right: 0;
                border-right: 1px solid rgb(2, 242, 250);
            }

            .corner::before,.corner::after{
                position: absolute;
                bottom: 0;
                content: "";
                width: 15px;
                height: 18px;
                border-bottom: 1px solid rgb(2, 242, 250);
            }
            .corner::before{// 左下角
                left: 0;
                border-left: 1px solid rgb(2, 242, 250);
            }
            .corner::after{// 右下角
                right: 0;
                border-right: 1px solid rgb(2, 242, 250);
            }