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


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM