css怎么制作打勾

使用伪元素和边框旋转

通过CSS的伪元素和旋转边框可以创建一个打勾效果。定义一个正方形元素，通过旋转其边框的一部分来形成勾的形状。

.checkmark {
    width: 20px;
    height: 20px;
    border: 2px solid #000;
    transform: rotate(45deg);
}

.checkmark::before {
    content: "";
    position: absolute;
    width: 6px;
    height: 12px;
    border-bottom: 2px solid #000;
    border-right: 2px solid #000;
    top: 1px;
    left: 5px;
}

使用SVG内联

直接在HTML中嵌入SVG代码，通过路径（<path>）绘制打勾图形。这种方法灵活且易于控制样式。

<svg width="20" height="20" viewBox="0 0 20 20">
    <path d="M7 14l5-5 1.5 1.5L7 17l-4.5-4.5 1.5-1.5z" fill="currentColor"/>
</svg>

使用Unicode字符

某些Unicode字符可以直接显示为打勾符号（如✓或✔），通过CSS调整其大小和颜色。

.checkmark {
    font-size: 24px;
    color: green;
}

<span class="checkmark">✓</span>

使用背景图片

将打勾图标作为背景图片应用到元素上，适合需要复杂图形或自定义设计的情况。

.checkmark {
    width: 20px;
    height: 20px;
    background-image: url('checkmark.png');
    background-size: contain;
}

使用CSS动画效果

为打勾添加动画效果，使其绘制过程更生动。结合@keyframes和stroke-dashoffset（适用于SVG路径）。

.checkmark {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: draw 0.5s forwards;
}

@keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}

使用复选框样式化

将原生的<input type="checkbox">通过CSS隐藏并替换为自定义的打勾样式。

input[type="checkbox"] {
    display: none;
}

input[type="checkbox"] + label::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid #555;
    margin-right: 8px;
}

input[type="checkbox"]:checked + label::before {
    background-color: #4CAF50;
    border-color: #4CAF50;
    content: "✓";
    color: white;
    text-align: center;
    line-height: 18px;
}

<input type="checkbox" id="check">
<label for="check">选项</label>