css制作符号
使用 CSS 制作符号的方法
使用伪元素生成符号
通过 ::before 或 ::after 伪元素结合 content 属性插入 Unicode 符号或自定义形状。
.element::before {
content: "→"; /* Unicode 箭头符号 */
margin-right: 5px;
}利用边框绘制简单符号
通过调整元素的边框和尺寸，可以创建三角形、箭头等形状。
.triangle {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 20px solid #000; /* 向下三角形 */
}使用 Unicode 或 HTML 实体
直接在 HTML 中插入 Unicode 符号，并通过 CSS 控制样式。
<span class="symbol">✓</span>.symbol {
color: green;
font-size: 24px;
}通过 background-image 添加 SVG 符号
使用 SVG 作为背景图像，适合复杂或自定义符号。
.custom-symbol {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2L4 12l8 10 8-10z"/></svg>');
width: 24px;
height: 24px;
}结合 transform 旋转或缩放
对现有符号进行变形处理，例如旋转箭头。
.rotated-arrow::before {
content: "→";
display: inline-block;
transform: rotate(45deg);
}使用 CSS 图标库
引入第三方图标库（如 Font Awesome）直接调用预定义符号。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<i class="fas fa-star"></i>注意事项
- Unicode 符号的显示依赖字体支持，需测试兼容性。
- 边框绘制的符号适合简单几何形状，复杂图形建议使用 SVG。
- 伪元素生成的符号无法通过键盘选中，需确保无障碍兼容性。
