css設置四個邊角的樣式

 

html

<div class="input_style_box">
                        <div class="angle_border left_top_border"></div>
                        <div class="angle_border right_top_border"></div>
                        <div class="angle_border left_bottom_border"></div>
                        <div class="angle_border right_bottom_border"></div>
                    <div class="input_box ">
                        <img src="img/password.png" alt=""> <input type="text" class="code_input" maxlength="6" name="name2"><div class="get_code">獲取驗證碼</div>
                    </div>
                </div>

 

css

.input_style_box{
    position: relative;
    
    .angle_border{
      position: absolute;
      width: 5*@fs1;
      height: 5*@fs1;
    }
    .left_top_border{
      top: 0;
      left: 0;
      border-left: 2*@fs1 solid #dadada;
      border-top: 2*@fs1 solid #dadada;
    }
    .right_top_border{
      top: 0;
      right: -2*@fs1;
      border-right: 2*@fs1 solid #dadada;
      border-top: 2*@fs1 solid #dadada;
    }
    .left_bottom_border{
      bottom: 0;
      left: 0;
      border-bottom: 2*@fs1 solid #dadada;
      border-left: 2*@fs1 solid #dadada;
    }
    .right_bottom_border{
      bottom: 0;
      right: -2*@fs1;
      border-right: 2*@fs1 solid #dadada;
      border-bottom: 2*@fs1 solid #dadada;
    }
  }