css怎么制作打勾

使用伪元素和边框旋转

在CSS中，可以通过伪元素和边框旋转来创建一个打勾效果。定义一个元素，利用::before或::after伪元素绘制两条边框，并通过旋转使其形成勾状。

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

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

使用SVG内联

直接嵌入SVG代码可以更灵活地控制打勾的形状和颜色。通过path元素绘制勾的路径，并利用CSS或SVG属性调整样式。

<svg viewBox="0 0 24 24" width="24" height="24">
    <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" fill="green"/>
</svg>

使用Unicode字符

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

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

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

结合动画效果

为打勾添加动画效果，使其呈现绘制过程。通过stroke-dasharray和stroke-dashoffset实现SVG路径的动画。

<svg viewBox="0 0 24 24" width="24" height="24">
    <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" 
          fill="none" 
          stroke="green" 
          stroke-width="2"
          stroke-dasharray="24"
          stroke-dashoffset="24">
        <animate attributeName="stroke-dashoffset" values="24;0" dur="0.3s" fill="freeze"/>
    </path>
</svg>

使用CSS渐变和遮罩

通过CSS渐变和mask属性创建复杂的打勾形状。定义一个线性渐变作为遮罩，形成勾的轮廓。

.checkmark {
    width: 20px;
    height: 20px;
    background-color: green;
    mask: linear-gradient(45deg, transparent 45%, black 45%, black 55%, transparent 55%) 
          linear-gradient(-45deg, transparent 45%, black 45%, black 55%, transparent 55%);
}