完全用css代码实现二维码扫描图标

<style>
  .content.top-corner[data-v-36e63766]::after {
    position: absolute;
    top: 0;
    right: 0;
    content: "";
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border-right: 4px solid #01b1fc;
    border-top: 4px solid #01b1fc;
    border-top-right-radius: .3125rem;
  }
  .content.top-corner[data-v-36e63766]::before {
    content: "";
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border-left: 4px solid #01b1fc;
    border-top: 4px solid #01b1fc;
    border-top-left-radius: .3125rem;
  }
  .content[data-v-36e63766] {
    position: relative;
    display: inline-block;
    top: 1.25rem;
    left: calc(50% - 2.1875rem);
    margin: 0 auto;
    height: 4.375rem;
    width: 4.375rem;
  }
  .content .bottom-corner.bottom-corner[data-v-36e63766]::after {
    float: right;
    content: "";
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border-right: 4px solid #01b1fc;
    border-bottom: 4px solid #01b1fc;
    border-bottom-right-radius: .3125rem;
  }
  .content .bottom-corner.bottom-corner[data-v-36e63766]::before {
    content: "";
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border-left: 4px solid #01b1fc;
    border-bottom: 4px solid #01b1fc;
    border-bottom-left-radius: .3125rem;
  }
  .content .bottom-corner[data-v-36e63766] {
    position: absolute;
    bottom: .25rem;
    left: 0;
    height: 1.25rem;
    width: 100%;
  }
  .content .line[data-v-36e63766] {
    margin-top: .625rem;
    height: .125rem;
    width: 100%;
    background-color: #01b1fc;
    box-shadow: .0625rem 0 .625rem #01b1fc;
  }
  a[data-v-36e63766] {
    text-decoration: none;
  }
</style>
<a href="#" class="content top-corner" data-v-36e63766="">
  <div class="bottom-corner" data-v-36e63766="">
  </div>
  <div class="line" data-v-36e63766=""></div>
</a>