css设置边框四角样式

 

开发中使用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);;
  }

 

• 最终实现