css铅笔制作
CSS铅笔制作方法
使用CSS绘制铅笔可以通过纯代码实现矢量图形效果，无需图片资源。以下是两种常见的实现方式：
方式一：线性渐变与旋转
.pencil {
width: 200px;
height: 30px;
background: linear-gradient(
to right,
#f0c14b 0%,
#f0c14b 20%,
#e67e22 20%,
#e67e22 40%,
#e74c3c 40%,
#e74c3c 60%,
#3498db 60%,
#3498db 80%,
#2ecc71 80%,
#2ecc71 100%
);
position: relative;
transform: rotate(30deg);
}方式二：伪元素细节增强
.pencil-advanced {
width: 200px;
height: 40px;
background: #d1a05c;
position: relative;
border-radius: 5px;
}
.pencil-advanced::before {
content: '';
position: absolute;
right: -20px;
top: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 20px 0 20px 20px;
border-color: transparent transparent transparent #333;
}
.pencil-advanced::after {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 100%;
height: 10px;
background: repeating-linear-gradient(
to right,
#f5f5f5,
#f5f5f5 10px,
#ddd 10px,
#ddd 20px
);
}实现要点
结构分层 铅笔通常由三部分组成：笔身（主体颜色）、笔尖（三角形伪元素）、笔杆装饰线（重复渐变）。通过分层叠加实现立体感。
颜色选择 典型铅笔使用黄色笔身搭配金属灰笔尖，装饰线可用浅灰色条纹。CMYK色值参考：
- 笔身：#f0c14b
- 笔尖：#333333
- 装饰线：#f5f5f5
动态效果 增加悬停动画可使铅笔更生动：
.pencil:hover {
transform: rotate(15deg) scale(1.1);
transition: all 0.3s ease;
}浏览器兼容性
现代浏览器均支持该实现方式，如需兼容旧版浏览器可添加-webkit-前缀。建议通过@supports检测特性支持：
@supports (transform: rotate(0deg)) {
/* 现代浏览器样式 */
}
