css图标制作

使用CSS制作图标的方法

纯CSS绘制基础形状

通过CSS的border、width、height等属性可以绘制简单图标：

.heart {
  width: 20px;
  height: 20px;
  background-color: red;
  transform: rotate(45deg);
  position: relative;
}
.heart::before, .heart::after {
  content: '';
  width: 20px;
  height: 20px;
  background-color: red;
  border-radius: 50%;
  position: absolute;
}
.heart::before {
  top: -10px;
  left: 0;
}
.heart::after {
  top: 0;
  left: -10px;
}

使用伪元素增强效果

伪元素能扩展绘制可能性：

.arrow {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #333;
}

CSS渐变创建复杂图形

线性/径向渐变可构建更精细的图标：

.sun {
  width: 30px;
  height: 30px;
  background: radial-gradient(circle, yellow 40%, orange 100%);
  border-radius: 50%;
}

动画交互效果

添加悬停或状态变化动画：

.loader {
  width: 24px;
  height: 24px;
  border: 3px solid #ddd;
  border-top-color: #444;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

组合多个元素

通过嵌套元素创建复合图标：

.envelope {
  position: relative;
  width: 30px;
  height: 20px;
  background: #fff;
  border: 2px solid #333;
}
.envelope:after {
  content: '';
  position: absolute;
  top: -7px;
  left: 5px;
  width: 20px;
  height: 20px;
  background: #fff;
  transform: rotate(45deg);
  border-top: 2px solid #333;
  border-right: 2px solid #333;
}

响应式调整

使用相对单位确保缩放效果：

.icon {
  width: 1em;
  height: 1em;
  font-size: calc(16px + 0.5vw);
}

现有CSS图标库

可参考的CSS图标实现方案：

• Font Awesome的CSS版本
• Ionicons的纯CSS实现
• CSS.gg开源项目

通过合理组合基础属性、伪元素和动画，能创建从简单到复杂的各类图标，且具备体积小、可编程控制的优势。现代CSS特性如clip-path、mask等可进一步扩展创作可能性。