效果预览

在线演示

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

https://codepen.io/comehope/pen/PaZYBw

可交互视频教程

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

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

https://scrimba.com/p/pEgDAM/cEQqefK

源代码下载

本地下载

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

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

如何创作用纯 CSS 绘制一支栩栩如生的铅笔的更多相关文章

  1. 41.纯 CSS 绘制一支栩栩如生的铅笔

    原文地址: https://segmentfault.com/a/1190000015153865 感想: 不难 HTML code: <div class="pencil" ...

  2. 碉堡了! 纯 CSS 绘制《辛普森一家》人物头像

    这篇文章给大家分享一组纯 CSS 绘制的<辛普森一家>人物头像.<辛普森一家>(The Simpsons)是马特·格勒宁为美国福克斯广播公司创作的一部动画情景喜剧.该剧通过对霍 ...

  3. CSS 魔法系列:纯 CSS 绘制三角形(各种角度)

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  4. 摘记 史上最强大的40多个纯CSS绘制的图形(一)

    今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方 ...

  5. 史上最强大的40多个纯CSS绘制的图形

    Square(正方形) #square { width: 100px; height: 100px; background: red; } Rectangle(矩形) #rectangle { wid ...

  6. 40多个纯CSS绘制的图形

    本文由码农网 – 陈少华原创,转载请看清文末的转载要求. 今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和 ...

  7. CSS 魔法系列:纯 CSS 绘制各种图形《系列六》

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  8. CSS 魔法系列:纯 CSS 绘制各种图形《系列五》

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  9. CSS 魔法系列:纯 CSS 绘制图形(各种形状的钻石)

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

随机推荐

  1. VC++6.0下新建工程中有17个选项,都是做什么用的?

    要理解每种工程的作用需要很多基础知识,只能简要的和你讲一下: 1.ATL COM AppWizard 用来新建一个COM组件的向导,比如WORD里用的公式编辑器就是一个COM组件. 2.Cluster ...

  2. cmd - 使用curl命令的注意点

    前言 最近在cmd中使用curl命令来测试rest api,发现有不少问题,这里记录一下. 在cmd中使用curl命令的注意事项 json不能由单引号包括起来 json数据里的双引号要用反斜杠\转义 ...

  3. python操作redis之String操作

    # __author__ = 'STEVEN' import redis,time # 方式1,直接链接操作 # r = redis.Redis(host='192.168.43.22',port=6 ...

  4. [译]Understanding ECMAScript6 函数

    函数 函数是任何编程语言的重要组成部分,而自从JavaScript被引入以来,JavaScript的函数就未有太多改变.遗留下来的积压问题及微妙行为使我们很容易犯错误,或者需要更多的代码来实现一个非常 ...

  5. MvcPager无刷新分页,包含搜索和跳转功能

    1.MVC无刷新分页和搜索(第一版)  http://pan.baidu.com/s/1eRQ7Ml8  密码:uqf7 出现的问题: 1)程序不走判断条件一直为false, 错误原因:1)可能没有引 ...

  6. BS3 多级菜单

    <div class="container"> <div class="row"> <h2>Multi level drop ...

  7. kafka基础四

    消费者消费过程(二) 消费组状态机:消息的产生存储消费看似是杂乱无章的,但万物都会遵循一定的规则成长,任何事物的发展都是有迹可循的. 开始消费组初始状态为Stable,经过第一次Rebalance之后 ...

  8. vue之导入Bootstrap和Jquery

    Vue引入bootstrap主要有两种方法 方法一:在main.js中引入,此方法导入的bootstrap中对于html,body的一些预设置的css样式可能无效. 一.引入jQuery 在当前项目的 ...

  9. webpack入门之最简单的例子 webpack4

    webpack在目前来说应该是前端用的比较多的打包工具了,那么对于之前没有接触过这块的该怎么办呢?答案很明显嘛,看资料,查文档,自己去琢磨,自己去敲一敲,跑一跑: 那么,这边我将以一个最基础的例子来将 ...

  10. 【Web应用】JAVA网络上传大文件报500错误

    问题描述 当通过 JAVA 网站上传大文件,会报 500 错误. 问题分析 因为 Azure 的 Java 网站都是基于 IIS 转发的,所以我们需要关注 IIS 的文件上传限制以及 requestT ...