[分享]css3支付成功对号

在网页设计中，支付成功对号是非常重要的一个元素，传统的做法是使用图片或者字体图标来实现。然而，随着CSS3的发展，我们现在可以使用纯CSS来完成支付成功对号的效果。在实现过程中，我们需要使用伪元素（:...

在网页设计中，支付成功对号是非常重要的一个元素，传统的做法是使用图片或者字体图标来实现。然而，随着CSS3的发展，我们现在可以使用纯CSS来完成支付成功对号的效果。

在实现过程中，我们需要使用伪元素（:before 和 :after）来创建两个长方形，然后通过相应的样式设置将它们旋转45度、缩小并偏移，最后让它们合并成一个正确的对号。

.success {
  position: relative;
  width: 50px;
  height: 50px;
}

.success:before,
.success:after {
  content: ';
  position: absolute;
  background-color: #0f9d58;
}

.success:before {
  width: 20px;
  height: 10px;
  top: 50%;
  left: 0;
  transform: translate(5px,-50%) rotate(-45deg);
}

.success:after {
  width: 35px;
  height: 10px;
  top: 50%;
  left: 8px;
  transform: translate(-16px,-50%) rotate(45deg);
} 

在上面的代码中，我们首先给支付成功对号添加了一个相对定位，并设置了一个固定的宽度和高度。接着我们使用:before和:after两个伪元素分别创建了一个下倾斜的长方形和一个上倾斜的长方形，并设置它们的尺寸、位置和旋转角度。最后，我们使用了一个background-color样式为长方形设置了背景色。

通过这些简单的CSS样式设置，我们就可以轻松地完成支付成功对号的效果。这种方法的好处是不用加载额外的图片或字体，能大大减小网页加载的时间和流量消耗，从而提高网页性能。