css 实现勾叉

css tick

<span class="tick"></span>
<span class="tick tick-success"></span>
<span class="tick tick-error"></span>

.tick {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: gray;
}
.tick:before, .tick:after {
  background: white;
  position: absolute;
  content: " ";
  left: 30%;
  right: 30%;
  top: 50%;
  height: 2px;
  bottom: auto;
}
.tick-success {
  background: green;
  transform: rotate(45deg);
}
.tick-success:after {
  height: 2px;
  bottom: 25%;
  left: 30%;
  right: 45%;
  top: auto;
}
.tick-success:before {
  width: 2px;
  height: auto;
  bottom: 25%;
  top: 20%;
  left: 55%;
  right: auto;
}
.tick-error {
  background: red;
  transform: rotate(45deg);
}
.tick-error:after {
  width: 2px;
  height: auto;
  top: 20%;
  bottom: 20%;
  left: 50%;
  right: auto;
  margin-left: -1px;
}
.tick-error:before {
  left: 20%;
  right: 20%;
  top: 50%;
  bottom: auto;
  margin-top: -1px;
  height: 2px;
}

references:

1. css tick