前言

在日常生活中，铅笔人人都能用到，这次便带大家来纯CSS实现常常都能用到的铅笔。相信整个效果比较简单并且实现起来也很容易，话不多说，我们直接进入主题。

效果预览

效果如下所示。

HTML部分

首先我们看到HTML部分，这部分构造的是铅笔的本体，相关代码如下。

  <figure>
      <div class="pencil">
        <span class="taper">span>
        <span class="barrel">Think Differentspan>
        <span class="eraser">span>
      div>
      <div class="pencil">
        <span class="taper">span>
        <span class="barrel">Think Differentspan>
        <span class="eraser">span>
      div>
    ......
    figure>

这里定义了多个铅笔（pencil）元素。每个铅笔内有三个部分，锥形部分 (taper)、笔身 (barrel) 和橡皮部分 (eraser)。分别由div元素和span元素构成。综合来讲，这段代码创建了两个铅笔元素，每个铅笔都包含了尖端、笔身和橡皮部分这三个组成部分。

CSS部分

接着我们看到CSS部分，相关代码如下。

.pencil {
      display: flex;
      width: 50em;
      height: 3.5em;
      position: absolute;
      filter: drop-shadow(0 0 0.5em hsla(0, 0%, 0%, 0.2));
      transform-origin: 150% center;
      transform: rotate(calc((120 - 10 * var(--n)) * 1deg));
      --color-h: calc(180 + 10 * var(--n));
      --color-s: 75%;
      --color-l: 50%;
      --color-middle: hsl(var(--color-h), var(--color-s), var(--color-l));
      --color-top: hsl(
        var(--color-h),
        var(--color-s),
        calc(var(--color-l) * 1.2)
      );
      --color-bottom: hsl(
        var(--color-h),
        var(--color-s),
        calc(var(--color-l) * 0.8)
      );
    }

这里描述了铅笔（.pencil）元素的样式。设置元素为弹性布局，以便更好地控制子元素的排列方式，定义了铅笔元素的宽度和高度，并且将元素的定位方式设置为绝对定位。通过filter: drop-shadow(0 0 0.5em hsla(0, 0%, 0%, 0.2));应用了一个阴影效果，使用 hsla 表示颜色，以及透明度.紧接着设置了变换的原点位置，这里是在 X 轴上偏移了 150%，在 Y 轴上居中.对元素进行旋转变换，角度的计算使用了 calc() 函数，根据自定义属性 --n 的值来计算旋转角度。

这里还有一些自定义属性变量（--color-h、--color-s、--color-l、--color-middle、--color-top、--color-bottom）：

综合起来，这里使用了许多 CSS 属性和自定义变量实现了对铅笔元素样式的复杂控制。

接着看到taper的相关样式，相关代码如下。

  .pencil .taper {
      width: 4em;
    }
    .pencil .taper::before,

    .pencil .taper::after {
      content: "";
      position: absolute;
      border-style: solid;
      border-width: calc(3.5em / 2) 4em calc(3.5em / 2) 0;
      border-color: transparent;
    }
    .pencil .taper::before {
      border-right-color: burlywood;
    }
    .pencil .taper::after {
      border-right-color: var(--color-middle);
      transform-origin: left;
      transform: scale(0.3);
    }

这里描述了铅笔（.pencil）元素中尖端部分（.taper）的样式设置。它设置了铅笔尖端（taper）元素的宽度为4em。

通过.pencil .taper::before, .pencil .taper::after使用伪元素创建尖端的形状，这里设置了绝对定位和使用border属性绘制了一个等腰梯形，从而模拟了尖端部分的形状。

通过.pencil .taper::after设置了伪元素的右边框颜色为自定义变量 --color-middle 所定义的颜色，修改了变换的原点，使其在左侧，进行了缩放操作，使得伪元素的大小变为其原来的30%。综合起来，这里通过伪元素和变换操作，实现了对铅笔尖端部分形状和下部颜色的定义。

接着看到barrel的相关样式，相关代码如下。

 .pencil .barrel {
      width: 40em;
      background-color: var(--color-middle);
      border-top: 1em solid var(--color-top);
      border-bottom: 1em solid var(--color-bottom);
      color: silver;
      line-height: 1.5em;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 0.1em;
    }

这里描述了铅笔（.pencil）元素中笔身部分（.barrel）的样式设置。这里设置了笔身部分（barrel）的宽度为 40em。使用自定义变量 --color-middle 来设置笔身的背景颜色，并且设置文本颜色为银色。设置行高为1.5em以及字母之间的间距为0.1em，以提高文本的可读性。综合起来，这里定义了铅笔笔身部分的形状、颜色和文本样式，以及文字的排列方式。

最后就是eraser的相关样式了，相关代码如下。

 .pencil .eraser {
      position: relative;
      width: 6em;
      background-color: lightpink;
      border-top: 1em solid pink;
      border-bottom: 1em solid lightcoral;
      border-radius: 0 0.5em 0.5em 0;
    }
    .pencil .eraser::before {
      content: "";
      position: absolute;
      top: -1em;
      width: 1.5em;
      height: 1.5em;
      background-color: silver;
      border-top: 1em solid lightgray;
      border-bottom: 1em solid gray;
    }

这里描述了铅笔（.pencil）元素中橡皮部分（.eraser）的样式设置。这里设置了橡皮部分（eraser）的基础样式，比如宽度颜色位置边框等，设置宽度为6em。总的来说，这里定义了铅笔橡皮部分的形状、颜色等。

总结

以上就是整个效果的实现过程了，纯 CSS 实现，代码简单易懂。另外，感兴趣的小伙伴们还可以在现有基础上发散思维，比如增加点其他效果，或者更改颜色等等。关于该效果如果大家有更好的想法欢迎在评论区分享，互相学习。最后，完整代码在码上掘金里可以查看，如果有什么问题大家在评论区里讨论~