当前位置：首页 > CSS

css怎么制作打勾

2026-01-28 12:43:52CSS

使用伪元素创建打勾效果

在CSS中，可以通过伪元素结合边框旋转来创建打勾效果。这种方法不需要额外的HTML元素，纯CSS实现。

.checkmark {
  display: inline-block;
  width: 22px;
  height: 22px;
  transform: rotate(45deg);
}

.checkmark:before {
  content: "";
  position: absolute;
  width: 3px;
  height: 9px;
  background-color: #333;
  left: 11px;
  top: 6px;
}

.checkmark:after {
  content: "";
  position: absolute;
  width: 3px;
  height: 3px;
  background-color: #333;
  left: 8px;
  top: 12px;
}

使用边框旋转技术

另一种常见的方法是使用两个边框旋转组合成打勾形状。

.checkmark {
  width: 20px;
  height: 20px;
  border-bottom: 3px solid green;
  border-right: 3px solid green;
  transform: rotate(45deg);
}

SVG实现打勾

使用内联SVG可以创建更精确的打勾图标。

<svg class="checkmark" viewBox="0 0 24 24">
  <path fill="currentColor" d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"/>
</svg>

.checkmark {
  width: 24px;
  height: 24px;
  color: green;
}

Unicode字符方案

最简单的方法是使用Unicode中的打勾符号。

.checkmark::after {
  content: "✓";
  color: green;
  font-size: 20px;
}

动画打勾效果

可以添加动画让打勾显示更生动。

css怎么制作打勾

@keyframes checkmark {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.checkmark {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-bottom: 3px solid green;
  border-right: 3px solid green;
  transform: rotate(45deg) scale(1);
  animation: checkmark 0.3s ease-out;
}

每种方法各有优缺点，伪元素方法适合简单场景，SVG适合需要精确控制的情况，Unicode字符最简单但定制性较差。根据项目需求选择最合适的技术方案。

标签: css