有趣的CSS实现“勾号”

1、矩形模拟

 // scss语法
.select-all{
  cursor: pointer;
  overflow: hidden;
  span{
    float: left;
    &:first-child{
        display: inline-block;
        margin: 22px 10px 0 20px;
        width: 16px;
        height: 16px;
        border:1px solid #dae0e6;
        position: relative;
        background: #fff;
          &.active{
            border-color: #09f;
            background: #09f;
            &:after{
              display: inline-block;
              content: "";
              position: absolute;
              border: 1px solid #fff;
              border-left: 0;
              border-top: 0;
              height: 7px;
              width: 3px;
              left: 5px;
              top: 1px;
              -webkit-transform: rotate(45deg) scaleY(1);
              transform: rotate(45deg) scaleY(1);
              transform-origin: center;
              -webkit-box-sizing: content-box;
              box-sizing: content-box;
              z-index: 200;
            }
            &:hover{
              border-color: #09f;
            }
          }
      }
  }
}

2、使用字体图标 UI设计提供，使用此方法会更加多样性