开发中使用css 伪类 是再常见不过的事情了，运用好了能轻松实现许多复杂的样式，大大减少使用图片消耗带宽的问题，今天我们就使用伪类来实现登录框的四角样式
html代码如下
<div class="form backLoginForm">
<el-form :model="formData" ref="form">
<!-- 添加自己的form 内容 -->
</el-form>
<div class="angle angle-left-top"></div>
<div class="angle angle-left-bottom"></div>
<div class="angle angle-right-top"></div>
<div class="angle angle-right-bottom"></div>
</div>
css 样式
.angle {
position: absolute;
width: 20px;
height: 20px;
}
.angle-left-top {
top: 0;
left: 0;
border-left: 4px solid rgba(7,185,255,0.5);
border-top: 4px solid rgba(7,185,255,0.5);
}
.angle-left-top:after{
content: "";
border-radius: 0;
font-size: 0;
width: 0;
height: 0;
position: absolute;
padding: 0;
top:-4px;
right:0;
border-left: 4px solid transparent;
border-right: 4px solid rgb(28,32,122);
border-bottom: 4px solid rgb(28,32,122);;
}
.angle-left-top:before{
content: "";
border-radius: 0;
font-size: 0;
width: 0;
height: 0;
position: absolute;
padding: 0;
bottom:0;
left:-4px;
border-top: 4px solid transparent;
border-right: 4px solid rgb(28,32,122);
border-bottom: 4px solid rgb(28,32,122);;
}
.angle-right-top {
top: 0;
right: -2px;
border-right: 4px solid rgba(7,185,255,0.5);
border-top: 4px solid rgba(7,185,255,0.5);
}
.angle-right-top:after{
content: "";
border-radius: 0;
font-size: 0;
width: 0;
height: 0;
position: absolute;
padding: 0;
bottom:0;
right:-4px;
border-right: 4px solid transparent;
border-left: 4px solid rgb(28,32,122);
border-bottom: 4px solid rgb(28,32,122);;
}
.angle-right-top:before{
content: "";
border-radius: 0;
font-size: 0;
width: 0;
height: 0;
position: absolute;
padding: 0;
top:-4px;
left:0;
border-top: 4px solid transparent;
border-left: 4px solid rgb(28,32,122);
border-bottom: 4px solid rgb(28,32,122);;
}
.angle-left-bottom {
bottom: 0;
left: 0;
border-bottom: 4px solid rgba(7,185,255,0.5);
border-left: 4px solid rgba(7,185,255,0.5);
}
.angle-left-bottom:after{
content: "";
border-radius: 0;
font-size: 0;
width: 0;
height: 0;
position: absolute;
padding: 0;
bottom:-4px;
right:0;
border-left: 4px solid transparent;
border-top: 4px solid rgb(28,32,122);
border-right: 4px solid rgb(28,32,122);;
}
.angle-left-bottom:before{
content: "";
border-radius: 0;
font-size: 0;
width: 0;
height: 0;
position: absolute;
padding: 0;
top:0;
left:-4px;
border-left: 4px solid transparent;
border-top: 4px solid rgb(28,32,122);
border-right: 4px solid rgb(28,32,122);;
}
.angle-right-bottom {
bottom: 0;
right: -2px;
border-right: 4px solid rgba(7,185,255,0.5);
border-bottom: 4px solid rgba(7,185,255,0.5);
}
.angle-right-bottom:after{
content: "";
border-radius: 0;
font-size: 0;
width: 0;
height: 0;
position: absolute;
padding: 0;
bottom:-4px;
left:0;
border-right: 4px solid transparent;
border-top: 4px solid rgb(28,32,122);
border-left: 4px solid rgb(28,32,122);;
}
.angle-right-bottom:before{
content: "";
border-radius: 0;
font-size: 0;
width: 0;
height: 0;
position: absolute;
padding: 0;
top:0;
right:-4px;
border-right: 4px solid transparent;
border-top: 4px solid rgb(28,32,122);
border-left: 4px solid rgb(28,32,122);;
}
最终实现
