[分享]css写一个勾

CSS是网页设计中不可或缺的一部分，使用它可以轻松地让网页变得更加美观和专业。今天，我们来学习一下如何使用CSS来绘制一个勾的效果。/ 定义一个勾的样式 / .checkmark { : relati...

CSS是网页设计中不可或缺的一部分，使用它可以轻松地让网页变得更加美观和专业。今天，我们来学习一下如何使用CSS来绘制一个勾的效果。

/* 定义一个勾的样式 */
.checkmark {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #000;
}

.checkmark:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 25%;
  width: 36%;
  height: 72%;
  border: solid #000;
  transform: rotate(45deg) translateY(-50%);
  border-width: 0 3px 3px 0;
} 

如上代码所示，我们定义了一个CSS选择器`.checkmark`，它使用了`position:relative`属性来定义其相对位置，`display:block`属性让它成为一个块级元素，并设置宽高为20px，以及边框半径为50%的圆形形状，边框2px宽，颜色为黑色。

接着，我们使用`:after`伪类为`.checkmark`添加了一个伪元素，并定义了它的绝对位置、大小、以及以下标准勾的样式：

• 将元素旋转45度
• 向上平移50%
• 设置边框宽度为0 3px 3px 0，即标准勾的样式

最后，将以上CSS代码应用到HTML中相应元素的class属性中，就可以轻松地实现一个漂亮的勾效果啦！