「这是我参与11月更文挑战的第6天，活动详情查看：2021最后一次更文挑战」

铅笔，距今已有四百多年的历史，其中，绘画素描的铅笔分为诸多类型，它分成三个发展阶段，分为石墨、木制笔杆、带帽铅笔。

1564年，在英格兰一个叫巴罗代尔的地方，人们发现了一种黑色矿物——石墨。很快，当地的一些牧羊人发现，可以用石墨在羊身上画上记号。受此启发，人们把石墨块切成小条拿来写字和绘画。但石墨条很容易弄脏手，而且容易折断。1761年，德国化学家法伯尔解决了这个问题：他先把石墨矿石研磨成粉末，用水冲洗去杂质，获得纯净的石墨粉；接着，他又在石墨粉中掺入硫磺、锑、松香等物质；然后再将这种混合物加热凝固，并压制成笔的形状，这是铅笔最早的雏形。

是不是觉得铅笔的进步非常大，这离不开先人们的摸索努力。下面我们用CSS制作一只漂亮的铅笔。

外观

有第一段话，前面由石墨、木制笔杆、带帽组成，OK，我们就简单的画出轮廓

<div class="pencil">
  <span class="taper"></span>
  <span class="barrel"></span>
  <span class="eraser"></span>
</div>

css

.pencil {
  display: flex;
  width: 50em;
  height: 3.5em;
  transform-origin: 150% center;
}

.pencil .taper {
  width: 4em;
  background: #000;
}
.pencil .barrel {
  width: 40em;
  background: green;
}

.pencil .eraser {
  position: relative;
  width: 6em;
  background: pink;
}

flex布局，铅笔分成3部分，黑色是笔尖、绿色是木质笔杆、粉色是笔帽（橡皮擦）

问一个题外话，上学的时候是不是橡皮擦永远不够用呢？上课没事就用手扣橡皮，哈哈，我反正是。

Flex简介

采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。

要想学习flex布局的，可以去我的历史文章里面，有更多更详细的介绍。

《CSS3中Flex弹性布局该如何灵活运用？》

细致化

笔尖：

/* 三角形 */
.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: #111;
  transform-origin: left;
  transform: scale(0.3);
}

用伪类画出两个三角形，然后石墨部分用transform: scale(0.3)缩小，CSS各种形状绘制推荐文章：《CSS画各种图形（五角星、吃豆人、太极图等）》

笔杆

.pencil .barrel {
  width: 40em;
  background-color: rgb(7, 150, 7);
  border-top: 1em solid rgb(9, 179, 9);
  border-bottom: 1em solid rgb(0, 128, 0);
  color: silver;
  line-height: 1.5em;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

设置border-top、border-bottom和背景，用不同颜色，达到层次感，使其更有立体感

笔帽

和笔杆同理，设置border-top、border-bottom和背景，用不同颜色

.pencil .eraser {
  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{
  position: relative;
  ...
}
.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;
}

所以我么自己用伪类，在橡皮上面覆盖一个金属圈即可

一只铅笔就这样出厂了，是不是很简单呢？跟铅笔的发展史比，这简直太简单了。

小结

本小结知识:

1、Flex布局

2、:befroe、:after伪类灵活运用

3、CSS绘制三角形等

4、transform 缩放元素

5、CSS border灵活运用

小伙伴们，有问题可以评论区留言哦，欢迎大家点评。需要源码的小伙伴可以私信我哦。

谢谢大家一直以来的支持。

CSS绘制铅笔：比心

外观

Flex简介

细致化

笔尖：

笔杆

笔帽

小结