css实现对勾状态图标

企业微信截图_963dcf6d-b476-4a9e-8a81-ea9ecd4817ab.png

.code-succ {
  position: relative;
  width: 45px;
  height: 25px;
  display: inline-block;
  border: 1px solid #1eaa99;
  font-size: 12px;
  color: #1eaa99;
  border-radius: 10%;
  line-height: 25px;
  text-align: center;
  &:after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    border-bottom: 17px solid #1eaa99;
    border-left: 17px solid transparent;
  }
  &:before {
    content: "";
    position: absolute;
    width: 10px;
    height: 5px;
    background: transparent;
    bottom: 4px;
    right: 0px;
    border: 2px solid white;
    border-top: none;
    border-right: none;
    -webkit-transform: rotate(-50deg);
    -ms-transform: rotate(-50deg);
    transform: rotate(-50deg);
    z-index: 9;
  }
}
.code-def {
  position: relative;
  width: 45px;
  height: 25px;
  display: inline-block;
  border: 1px solid #909090;
  font-size: 12px;
  color: #909090;
  border-radius: 10%;
  line-height: 25px;
  text-align: center;
}