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)) {
  /* 现代浏览器样式 */
}