css实现对勾和x号

在网页设计中，经常需要使用到对勾和x号来表示某些操作的成功与失败。使用CSS实现对勾和x号非常简单，只需要定义一些基本的样式就可以实现。

.tick {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #27ae60;
  border-radius: 50%;
  position: relative;
}

.tick:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%) rotate(-45deg);
  width: 7px;
  height: 14px;
  border: 3px solid #fff;
  border-top: none;
  border-right: none;
}

.cross {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #c0392b;
  border-radius: 50%;
  position: relative;
}

.cross:before,.cross:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%) rotate(-45deg);
  width: 3px;
  height: 14px;
  background: #fff;
}

.cross:before {
  transform: translate(-50%,-50%) rotate(45deg);
}

以上代码分别定义了对勾和x号的样式。对勾使用一个圆形的背景，然后在圆形中添加一个旋转45度的矩形，通过边框样式达到对勾的效果。x号同样使用一个圆形的背景，然后在圆形中添加两个旋转45度的矩形，通过前后两个矩形的角度差，达到x号的效果。

使用时，只需要在HTML中设置对应的class即可：

<div class="tick"></div>   // 对勾
<div class="cross"></div>  // x号

通过CSS实现对勾和x号，可以优化用户体验，使得用户在操作时更加直观地获得操作结果。