您的位置:首页 > Web前端 > CSS

css设置边框四角样式

2019-08-06 16:46 1761 查看
版权声明:署名,允许他人基于本文进行创作,且必须基于与原先许可协议相同的许可协议分发本文 (Creative Commons

开发中使用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 so
4000
lid 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);;
}
  • 最终实现
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: