如何创作用纯 CSS 绘制一支栩栩如生的铅笔

秒速五厘米 2022-04-15 05:52 198阅读 0赞

![1504257-20181122121840921-28878556.png][]

## 效果预览 ##

[在线演示][Link 1]

按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。

[https://codepen.io/comehope/pen/PaZYBw][https_codepen.io_comehope_pen_PaZYBw]

## 可交互视频教程 ##

此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。

请用 chrome, safari, edge 打开观看。

[https://scrimba.com/p/pEgDAM/cEQqefK][https_scrimba.com_p_pEgDAM_cEQqefK]

## 源代码下载 ##

[本地下载][Link 2]

每日前端实战系列的全部源代码请从 github 下载：

[https://github.com/comehope/front-end-daily-challenges][https_github.com_comehope_front-end-daily-challenges]

## 代码解读 ##

定义dom, 容器中包含笔头、笔杆（包含文字）和橡皮 3 部分：

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

居中显示：

body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: lightskyblue;
    }

定义铅笔的尺寸：

.pencil {
        position: relative;
        width: 50em;
        height: 3.5em;
    }

画出笔杆：

.pencil .barrel {
        position: absolute;
        width: 40em;
        left: 4em;
        background-color: green;
        border-top: 1em solid forestgreen;
        border-bottom: 1em solid darkgreen;
    }

设置笔杆上文字的样式：

.pencil .barrel {
        line-height: 1.5em;
        font-family: sans-serif;
        text-transform: uppercase;
        color: silver;
        text-align: center;
    }

用伪元素画出笔头：

.pencil .taper::before,
    .pencil .taper::after {
        content: '';
        position: absolute;
        left: -4em;
        border-style: solid;
        border-width: calc(3.5em / 2) 4em;
    }
    
    .pencil .taper::before {
        border-color: transparent burlywood transparent transparent;
    }
    
    .pencil .taper::after {
        border-color: transparent green transparent transparent;
        transform: scale(0.3);
    }

画出橡皮：

.pencil .eraser {
        position: absolute;
        right: 0;
        width: 6em;
        height: 1.5em;
        background-color: lightpink;
        border-top: 1em solid pink;
        border-bottom: 1em solid lightcoral;
        border-top-right-radius: 0.5em;
        border-bottom-right-radius: 0.5em;
    }

用伪元素画出橡皮上的铁箍：

.pencil .eraser::before {
        content: '';
        position: absolute;
        top: -1em;
        left: 0;
        width: 1.5em;
        height: 1.5em;
        background-color: silver;
        border-top: 1em solid lightgray;
        border-bottom: 1em solid gray;
    }

最后，增加阴影：

.pencil {
        filter: drop-shadow(5px 10px 3px gray);
    }

大功告成！

原文地址：[https://segmentfault.com/a/1190000015153865][https_segmentfault.com_a_1190000015153865]

[1504257-20181122121840921-28878556.png]: /images/20220415/fcdaf1239312408bb1b108b95712750c.png
[Link 1]: https://www.jqhtml.com/yanshi?demourl=%2Fwp-content%2Fuploads%2F2018%2F11%2Ffront-end-daily-challenges-master%2F041-pencil&demotitle=%E7%BA%AF%20CSS%20%E7%BB%98%E5%88%B6%E4%B8%80%E6%94%AF%E6%A0%A9%E6%A0%A9%E5%A6%82%E7%94%9F%E7%9A%84%E9%93%85%E7%AC%94
[https_codepen.io_comehope_pen_PaZYBw]: https://codepen.io/comehope/pen/PaZYBw
[https_scrimba.com_p_pEgDAM_cEQqefK]: https://scrimba.com/p/pEgDAM/cEQqefK
[Link 2]: http://www.jqhtml.com/19315.html
[https_github.com_comehope_front-end-daily-challenges]: https://github.com/comehope/front-end-daily-challenges
[https_segmentfault.com_a_1190000015153865]: https://segmentfault.com/a/1190000015153865