css3 打钩 打叉

CSS3 是当前前端开发必备的技能之一，提供了丰富的样式效果和动画特效，本文将介绍如何使用 CSS3 制作打钩和打叉的效果。

首先，我们需要使用如下 CSS 代码来定义钩子和叉子的样式：

.check {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    border: 3px solid #4CAF50;
    position: relative;
}

.check::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 20px;
    width: 25px;
    height: 50px;
    border-right: 4px solid #4CAF50;
    transform: rotate(45deg);
}

.check::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 20px;
    width: 25px;
    height: 25px;
    border-left: 4px solid #4CAF50;
    transform: rotate(-45deg);
}

.cross {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    border: 3px solid #f44336;
    position: relative;
}

.cross::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 10px;
    width: 55px;
    height: 55px;
    border-top: 4px solid #f44336;
    border-right: 4px solid #f44336;
    transform: rotate(-45deg);
}

.cross::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 10px;
    width: 55px;
    height: 55px;
    border-top: 4px solid #f44336;
    border-left: 4px solid #f44336;
    transform: rotate(45deg);
}

上述代码定义了两个类别 check 和 cross，分别表示打钩和打叉的样式。在类别中，先定义一个圆形区域，并将其与对应的颜色和边框样式设置好。然后使用伪元素 ::before 和 ::after 来创建钩子和叉子的形状，再通过 position 和 transform 属性来控制其位置和旋转角度。

接下来，我们在 HTML 中使用对应的类名来应用样式效果：

<div class="check"></div>
<div class="cross"></div>

以上代码就可以分别创建出一个打钩和打叉的效果。

总结来说，使用 CSS3 制作打钩和打叉的效果并不复杂，只需要定义好样式，然后与 HTML 进行组合应用即可。