用css画勾和叉

文章目录

css实现勾 √

.right {
  width: 28px;
  height: 28px;
  line-height: 26px;
  border: 1px solid #025299;
  background-color: #025299;
  position: relative;
  cursor: pointer;
}

.right::before {
  position: absolute;
  content: " ";
  width: 7px;
  height: 13px;
  transform: rotate(45deg);
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  top: 4px;
  left: 9px;
}

css实现叉 x

.error {
  width: 28px;
  height: 28px;
  line-height: 26px;
  border: 1px solid #025299;
  background-color: #025299;
  position: relative;
  cursor: pointer;
}

.error::before,
.error::after {
  content: "";
  position: absolute;
  height: 18px;
  width: 2px;
  top: 5px;
  left: 12px;
  background: #fff;
}
.error::before {
  transform: rotate(45deg);
}
.error::after {
  transform: rotate(-45deg);
}

效果展示
在这里插入图片描述

通过unicode 来实现

你可以使用 CSS 来创建 √（勾号）和 ×（叉号）的图标，通常使用伪元素 ::before 和 ::after 来实现这些效果。以下是示例 CSS 代码，用于创建 √ 和 × 图标：

/* √（勾号）图标 */
.checkmark::before {
  content: '\2713'; /* Unicode 字符，代表 √ */
  font-size: 20px;
  color: green; /* 勾号的颜色 */
}

/* ×（叉号）图标 */
.cross::before {
  content: '\2717'; /* Unicode 字符，代表 × */
  font-size: 20px;
  color: red; /* 叉号的颜色 */
}

在上述代码中，我们使用 Unicode 字符来表示 √ 和 × 符号，并通过 ::before 伪元素将它们添加到元素的内容中。你可以根据需要调整 font-size 和颜色以满足你的设计需求。

以下是一个 HTML 示例，显示如何使用这些图标：

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

上述 HTML 中的两个 div 元素分别添加了 checkmark 和 cross 类，以应用 √ 和 × 的样式。

这只是一个简单的示例，你可以根据自己的需要和设计风格来调整图标的大小、颜色和其他样式属性。

扩展阅读

Unicode 字符在 CSS 中的作用多种多样，它们可以用于各种样式和装饰效果。以下是一些常见的 Unicode 字符在 CSS 中的作用：

图标和装饰符号：
- Unicode 字符可用于创建各种图标、装饰符号和特殊符号，如√、×、★、❤、✈等。这些符号可以用于页面中的标志、按钮、标签等元素。
自定义列表标志：
- 你可以使用 Unicode 字符作为自定义列表标志，代替默认的项目符号（如圆点或数字）。这可以为你的列表添加独特的风格。
```
ul {
  list-style: none; /* 移除默认列表标志 */
}

li::before {
  content: '\2022'; /* Unicode 字符，代表圆点符号 */
  margin-right: 5px;
}
```

引号和标点符号：

Unicode 字符可以用于自定义引号、破折号和其他标点符号，以改进文本排版和风格。

q::before {
  content: '\201C'; /* 左引号 */
}

q::after {
  content: '\201D'; /* 右引号 */
}

blockquote::before {
  content: '\2014'; /* 破折号 */
}

箭头和指示符：
- Unicode 字符可用于创建各种箭头、指示符号和方向指示符。这对于创建导航元素或提示用户进行某些操作非常有用。
```
.next::before {
  content: '\2192'; /* 右箭头 */
}

.info::before {
  content: '\2139'; /* 信息指示符号 */
}
```
特殊符号和表情符号：
- Unicode 提供了大量的特殊符号和表情符号，可用于增加页面的趣味性和情感表达。
```
.smile::before {
  content: '\1F604'; /* 笑脸表情 */
}
```

这些示例只是展示了 Unicode 字符在 CSS 中的一些常见用法，但实际上 Unicode 字符非常多样化，你可以根据需要在样式中使用不同的字符来满足设计和排版的需求。Unicode 字符在 Web 开发中提供了一种丰富和灵活的方式来增强页面的内容和样式。

在这里插入图片描述