先看效果图
HTML代码(注:view是微信小程序中的div,如果是html或者vue换成div即可):
<view style="width:272rpx;height:216rpx;position:relative;margin: 10px 0px 0 5px;">
<view class="a"></view>
<view class="b"></view>
<view class="c"></view>
<view class="d"></view>
</view>
CSS代码:
.a {
width: 10px;
height: 10px;
position: absolute;
top: 0;
left: 0;
border-left: 2px solid #EBEBEB;
border-top: 2px solid #EBEBEB;
}
.b {
width: 10px;
height: 10px;
position: absolute;
top: 0;
right: 0;
border-right: 2px solid #EBEBEB;
border-top: 2px solid #EBEBEB;
}
.c {
width: 10px;
height: 10px;
position: absolute;
bottom: 0;
left: 0;
border-bottom: 2px solid #EBEBEB;
border-left: 2px solid #EBEBEB;
}
.d {
width: 10px;
height: 10px;
position: absolute;
bottom: 0;
right: 0;
border-right: 2px solid #EBEBEB;
border-bottom: 2px solid #EBEBEB;
}
即可实现效果。