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>
