实现需求
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/a20f63b485e62b4cfe552e2720f39c7c.png#pic_center)
实现思路
- 给.panel元素的四边上四个折线框,是通过一个个宽高10px的小div只显示两侧边框实现的
- 上面两个可以直接给.panel添加伪元素选择器::before和::after
- 下面两个可以再给.panel套一个div.panel-footer,同样给这个元素添加两个伪元素选择器
- 设置定位:子绝父相
完整代码
html
<div class="panel">
<div class="panel-footer"></div>
</div>
css
.panel {
position: relative;
height: 3.875rem;
border: 1px solid rgba(25, 186, 136, .17);
background-image: url("../images/line\(1\).png");
padding: 0 .0625rem .5rem .0625rem;
&::before {
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 10px;
border-left: 2px solid #02a6b5;
border-top: 2px solid #02a6b5;
content: "1";
}
&::after {
position: absolute;
top: 0;
right: 0;
width: 10px;
height: 10px;
border-right: 2px solid #02a6b5;
border-top: 2px solid #02a6b5;
content: "1";
}
.panel-footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
&::before {
position: absolute;
bottom: 0;
left: 0;
width: 10px;
height: 10px;
border-left: 2px solid #02a6b5;
border-bottom: 2px solid #02a6b5;
content: "1";
}
&::after {
position: absolute;
bottom: 0;
right: 0;
width: 10px;
height: 10px;
border-right: 2px solid #02a6b5;
border-bottom: 2px solid #02a6b5;
content: "1";
}
}