css的铅笔怎么画

CSS是网页设计中非常重要的一种语言。它可以用来控制网页的样式和布局。其中，铅笔的画法是一种经典的CSS应用案例，在这里我们来看看如何使用CSS实现铅笔的画法。

/* 笔杆样式 */
.pen {
  width: 1em;
  height: 5em;
  background: #333;
  border-radius: 0.5em;
}
/* 笔芯样式 */
.pen::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border: 1.5em solid transparent;
  border-bottom: 2.5em solid #f5b042;
  border-radius: 1em;
  margin-top: -4em;
  margin-left: -0.4em;
}
 

以上是铅笔画法的CSS代码，代码中包含两个选择器：.pen和.pen::before，分别代表笔杆和笔芯。

首先是笔杆的样式，设置其宽度为1em，高度为5em，背景为#333（黑色），边框半径为0.5em，使其呈现出铅笔的形状。

其次是笔芯的样式，通过在.pen选择器后加上伪元素::before来实现。伪元素中的border属性用于实现三角形的形状，同时通过border-bottom属性调整其大小，颜色为#f5b042（黄色），并设置了较大的负上边距、较小的负左边距，使其与笔杆重合，呈现出笔芯的形状。

通过以上CSS代码实现了铅笔的画法，可以将其应用于网页设计中的卡通元素、手绘风格等。