当前位置：首页 > CSS

css代码符号制作

2026-04-02 16:48:23CSS

CSS 符号制作方法

使用 CSS 制作符号可以通过伪元素、边框、变换等属性实现。以下是几种常见符号的实现方式：

对勾符号

.checkmark {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: solid green;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

叉号符号

css代码符号制作

.cross {
  position: relative;
  width: 20px;
  height: 20px;
}
.cross::before, .cross::after {
  content: '';
  position: absolute;
  height: 2px;
  width: 100%;
  top: 50%;
  left: 0;
  background: red;
}
.cross::before {
  transform: rotate(45deg);
}
.cross::after {
  transform: rotate(-45deg);
}

箭头符号

.arrow-right {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid blue;
}

使用 Unicode 字符

CSS 可以直接使用 Unicode 字符作为内容：

css代码符号制作

.star::before {
  content: "\2605";
  color: gold;
}

使用 SVG 图标

通过 CSS 背景引入 SVG 符号：

.icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24"><path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" fill="currentColor"/></svg>');
}

动画符号

为符号添加动画效果：

.loading {
  width: 20px;
  height: 20px;
  border: 3px solid rgba(0,0,0,0.1);
  border-radius: 50%;
  border-top-color: #3498db;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

这些方法可以根据需要组合使用，创建各种自定义符号和图标。