[分享]css写一个对勾

在网页开发中，经常需要用到一些图形，如对勾、叉号等等。今天，我们就来学习如何使用CSS实现一个简单的对勾。.checkmark { width: 40px; height: 40px; border:...

在网页开发中，经常需要用到一些图形，如对勾、叉号等等。今天，我们就来学习如何使用CSS实现一个简单的对勾。

.checkmark {
  width: 40px;
  height: 40px;
  border: 2px solid #000;
  border-radius: 50%;
  position: relative;
}

.checkmark:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 25%;
  width: 10%;
  height: 20%;
  border-bottom: 5px solid #000;
  border-right: 5px solid #000;
  transform: rotate(45deg) translateY(-50%);
} 

以上就是实现一个对勾的CSS代码，接下来我们来一步步解析这段代码。

首先，我们给一个div元素设置了对勾的class为"checkmark"，并且设置了这个元素的宽高以及边框。

接下来，在这个div元素的CSS中使用了伪元素:after，来实现对勾的绘制。在这个伪元素中，我们设置了边框的样式（下和右），并且使用“transform: rotate(45deg) translateY(-50%)”函数来旋转对勾的角度和位置。

最后，我们就可以愉快地看到我们所期望的对勾了。