当前位置：首页 > CSS

css 制作图标

2026-04-02 13:12:22CSS

使用 CSS 制作图标的方法

使用伪元素和边框

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

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

利用 `clip-path` 裁剪复杂形状

clip-path 属性允许通过多边形或 SVG 路径裁剪元素，适合制作复杂图标：

.star {
    width: 30px;
    height: 30px;
    background-color: gold;
    clip-path: polygon(
        50% 0%, 61% 35%, 98% 35%, 68% 57%,
        79% 91%, 50% 70%, 21% 91%, 32% 57%,
        2% 35%, 39% 35%
    );
}

通过 `box-shadow` 创建多元素图标

利用 box-shadow 的扩散特性可以生成多个重复形状，例如制作菜单图标：

.menu-icon {
    width: 20px;
    height: 2px;
    background: #000;
    box-shadow: 0 6px 0 #000, 0 12px 0 #000;
}

结合渐变背景

线性渐变或径向渐变可以模拟部分图标效果，例如圆形靶心：

.target {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: radial-gradient(
        circle, #fff 0%, #fff 30%, 
        #333 30%, #333 40%, 
        #fff 40%, #fff 70%, 
        #333 70%
    );
}

动画增强交互效果

添加 CSS 动画使图标更生动，如下拉箭头动画：

css 制作图标

.arrow {
    width: 12px;
    height: 12px;
    border-right: 2px solid #333;
    border-bottom: 2px solid #333;
    transform: rotate(45deg);
    transition: transform 0.3s;
}
.arrow:hover {
    transform: rotate(45deg) translateY(5px);
}