css制作恢复图标

使用CSS制作恢复图标

通过CSS的伪元素和边框属性可以创建简洁的恢复图标，以下是两种常见实现方式：

基础箭头恢复图标

.restore-icon {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #333; /* 主箭头 */
    position: relative;
}

.restore-icon::before {
    content: "";
    position: absolute;
    left: -7px;
    top: 4px;
    border-left: 7px solid #333;
    border-bottom: 7px solid transparent;
    transform: rotate(45deg); /* 尾部短箭头 */
}

环形箭头恢复图标

.restore-icon {
    width: 24px;
    height: 24px;
    border: 3px solid #333;
    border-radius: 50%;
    position: relative;
}

.restore-icon::before {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    border-left: 3px solid #333;
    border-bottom: 3px solid #333;
    transform: rotate(45deg);
    left: 5px;
    top: 2px;
}

关键实现要点

• 利用border属性创建三角形箭头
• 通过transform: rotate()调整角度
• 伪元素::before添加辅助图形
• 环形图标结合border-radius: 50%
• 通过绝对定位精确控制元素位置

扩展样式建议

• 添加悬停动画效果：

  .restore-icon:hover {
    transform: scale(1.1);
    transition: transform 0.2s ease;
  }

• 修改颜色变量适应主题：

  :root {
    --icon-color: #4285f4;
  }
  .restore-icon {
    border-color: var(--icon-color);
  }