css制作图标

使用CSS制作图标的方法

使用伪元素和边框

通过CSS的::before和::after伪元素结合border属性可以创建简单的几何形状图标。例如制作一个三角形：

.triangle {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 20px solid #333;
}

使用背景渐变

CSS的linear-gradient和radial-gradient可以创建复杂的图标图案。例如制作一个圆形图标：

.circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: radial-gradient(circle, #333 60%, transparent 60%);
}

使用SVG内联

直接在HTML中嵌入SVG代码，并通过CSS控制样式：

<div class="svg-icon">
    <svg viewBox="0 0 24 24" width="24" height="24">
        <path d="M12 2L4 12l8 10 8-10z" fill="#333"/>
    </svg>
</div>

.svg-icon svg {
    transition: fill 0.3s;
}
.svg-icon:hover svg {
    fill: #f00;
}

使用字体图标

通过引入字体图标库（如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-home"></i>

.fas {
    font-size: 24px;
    color: #333;
}

使用CSS动画图标

结合CSS动画制作动态图标效果：

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

使用clip-path

通过clip-path属性创建自定义形状：

.hexagon {
    width: 30px;
    height: 30px;
    background: #333;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

每种方法都有其适用场景，简单几何图形适合纯CSS实现，复杂图标推荐使用SVG或字体图标方案。