实现逻辑:
通过双伪元素、边框、定位实现
定义一个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);
}