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);;
  }

• 最終實現