CSS是前端開發中不可或缺的技術之一，通過它我們可以實現各種炫酷的效果。今天我們來學習如何利用CSS繪制一只鉛筆。

.pencil {
width: 0;
height: 0;
border-top: 30px solid #c9c9c9; /* 鉛筆的前端 */
border-left: 5px solid transparent;
border-right: 5px solid transparent;
position: relative;
margin: 50px 0;
}
.pencil:before {
content: '';
display: block;
width: 0;
height: 0;
border-top: 15px solid #c9c9c9; /* 鉛筆的后端 */
border-left: 3px solid transparent;
border-right: 3px solid transparent;
position: absolute;
left: -3px;
top: -15px;
}
.eraser {
width: 10px;
height: 5px;
border-radius: 5px;
background-color: #c9c9c9;
position: absolute;
top: -5px;
left: -2px;
z-index: -1;
}

首先，我們要創建一個class名為pencil的div元素作為鉛筆的主體。我們設置它的高度和寬度為0，然后利用CSS中的border屬性給它添加上一個邊框，顏色設為#C9C9C9，此時它看上去像是一個三角形。為了使它變成梯形狀的鉛筆，我們再給它的左右兩側添加上斜線，顏色同樣為#C9C9C9，此時鉛筆的前端已經繪制完成了。

接下來，我們需要在鉛筆的后端再添加一個三角形，表示鉛筆的尾部。同樣利用border屬性進行繪制，左右兩側斜線和前端部分的寬度不同，邊框的高度為15px。同時我們需要將它設置成絕對定位，并且設置left和top屬性值，讓它能夠與前端對應上。

鉛筆的尾部完成了，接下來就是鉛筆的橡皮部分。我們新建一個class名為eraser的div元素，設定它的寬度和高度為10px和5px，并且設置border-radius來設置它的圓角度數為5px。然后將它設置成絕對定位，與鉛筆尾部對應即可。

到此為止，我們通過CSS繪制了一支漂亮的鉛筆。在實際的網頁設計中，我們可以再添加一些特效達到更好的效果，比如添加hover屬性，讓鉛筆在鼠標懸停時變亮等等。