css实现一个勾 |css3按钮抖动特效

.checkmark {
display: inline-block;
width: 20px;
height: 20px;
border: solid 2px green;
transform: rotate(45deg);
overflow: hidden;
}
.checkmark:before {
content: "";
display: block;
width: 100%;
height: 100%;
background: green;
transform: rotate(-45deg) translate(0, 50%);
}

上述代码使用CSS绘制一个绿色的勾，步骤如下：

1. 使用一个带边框的div元素作为勾的容器，设置大小和边框颜色。

2. 将容器旋转45度。

3. 使用:before选择器在容器中添加一个伪元素，作为勾的主体。

4. 让伪元素旋转-45度，同时通过transform: translate(0, 50%);将它平移了一段距离，使其落在容器的一侧，形成勾的形状。

这个勾的样式可以继续调整，比如改变大小、颜色等，让它适合不同的需求。