css怎么制作打勾

使用伪元素和边框旋转

通过CSS的伪元素和边框旋转可以实现一个简单的打勾效果。创建一个元素，利用 ::before 或 ::after 伪元素绘制两条线段，并通过旋转和定位组合成勾形。

.checkmark {
    width: 20px;
    height: 20px;
    position: relative;
}

.checkmark::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid green;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

使用SVG内联或背景

通过内联SVG或背景图的方式直接绘制打勾图形。SVG可以精确控制路径和颜色，适合需要高定制化的场景。

.checkmark-svg {
    width: 20px;
    height: 20px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="green" d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>');
}

使用Unicode字符

直接使用Unicode中的勾选符号（如 ✓ 或 ✔），通过CSS调整大小和颜色。这种方法简单但样式有限。

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

结合动画效果

为打勾添加动画增强交互体验。通过 @keyframes 实现绘制过程的动态效果。

.checkmark-animate {
    width: 20px;
    height: 20px;
    position: relative;
}

.checkmark-animate::after {
    content: "";
    position: absolute;
    animation: drawCheck 0.5s ease-out forwards;
    opacity: 0;
}

@keyframes drawCheck {
    0% { opacity: 0; transform: scale(0) rotate(45deg); }
    100% { opacity: 1; transform: scale(1) rotate(45deg); }
}

响应式调整

使用相对单位（如 em 或 vw）确保打勾在不同屏幕尺寸下比例协调。

.checkmark-responsive {
    font-size: 1.2em;
    width: 1em;
    height: 1em;
}

以上方法可根据需求选择，伪元素方案适合轻量级自定义，SVG适合复杂图形，Unicode则适合快速实现。