先上效果图

该例子来自 CSS世界 的书中项目

总结技巧如下：

  1. 巧用 border 和 伪元素 来 绘制层叠效果。
  2. 使用 transform-origin 来改变元素的轴心
  3. 使用 filter:drop-shadow 绘制 物体 阴影

代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>铅笔</title>

    <style>

        .pencil {

            display: flex;

            width: 50em;

            height: 3.5em;

            font-size: 12px;

            margin: 0 auto;

            padding-top: 100px;

            filter: drop-shadow(0.4em 0.8em 0.3em grey);

        }

        .taper {

            width: 4em;

            /* background-color: burlywood; */

        }

        .taper::before {

            content: '';

            position: absolute;

            border-style: solid;

            border-width: calc(3.5em / 2) 4em calc(3.5em / 2) 0;

            border-color: transparent;

            border-right-color: burlywood;

        }

        .taper::after {

            content: '';

            position: absolute;

            border-style: solid;

            border-width: calc(3.5em / 2) 4em calc(3.5em / 2) 0;

            border-color: transparent;

            border-right-color: black;

            transform-origin: left;

            transform: scale(0.3);

        }

        .barrel {

            width: 40em;

            background-color: green;

            border-top: 1em solid forestgreen;

            border-bottom: 1em solid darkgreen;

            color: silver;

            line-height: 1.5em;

            text-align: center;

            text-transform: uppercase;

            letter-spacing: 0.1em;

        }

        .eraser {

            position: relative;

            width: 6em;

            background-color: lightpink;

            border-top:1em solid pink;

            border-bottom:1em solid lightcoral;

            border-radius: 0 0.5em 0.5em 0  ;

        }

        .eraser::before {

            content: '';

            position: absolute;

            width: 1.5em;

            height: 1.5em;

            background-color: silver;

            border-top:1em solid lightgrey;

            border-bottom:1em solid grey;

            top: -1em;

        }

    </style>

</head>

<body>

    <div class="pencil">

        <div class="taper"></div>

        <div class="barrel">一蓑烟雨任平生</div>

        <div class="eraser"></div>

    </div>

</body>

</html>

　　

drop-shadow文档

用CSS border画一个铅笔的更多相关文章

  1. css 如何“画”一个抽奖转盘

    主要描述的是如何运用 css 绘制一个抽奖转盘,并运用原生 js 实现转盘抽奖效果. 先来张效果图: 布局 一般来说,转盘一般有四个部分组成:外层闪烁的灯.内层旋转的圆盘.圆盘上的中奖结果.指针. 所 ...

  2. Effective前端3：用CSS画一个三角形

    p { text-indent: 2em } .triangle-container p { text-indent: 0 } img { margin: 15px 0 } 三角形的场景很常见,打开一 ...

  3. Effective前端1---chapter 2 用CSS画一个三角形

    1.CSS画三角形的画法 第一步:三角形可以用border画出来,首先一个有四个border的div长这样: <div class="triangle"></di ...

  4. Effective前端(3)用CSS画一个三角形

    来源:https://zhuanlan.zhihu.com/p/26160325 三角形的场景很常见,打开一个页面可以看到各种各样的三角形: 由于div一般是四边形,要画个三角形并不是那么直观.你可以 ...

  5. css画一个提示框

    用css画一个如下图的提示框: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  6. 【前端切图】用css画一个卡通形象-小猪佩奇

    最近在腾讯云技术社区遇到了一位奇才,用css画出了一个社会人小猪佩奇,不得不服.研究了一下他的文章https://segmentfault.com/a/1190000014909658,感觉甚是有趣, ...

  7. CSS画一个三角形，CSS绘制空心三角形，CSS实现箭头

     壹 ❀ 引 这两天因为项目工作较少,闲下来去看了GitHub上关于面试题日更收录的文章,毕竟明年有新的打算.在CSS收录中有一题是 用css创建一个三角形,并简述原理 .当然对于我来说画一个三角形是 ...

  8. div+css画一个小猪佩奇

    用DIV+CSS画一个小猪佩奇,挺可爱的,嘻嘻. HTML部分(全是DIV) <!-- 小猪佩奇整体容器 --> <div class="pig_container&quo ...

  9. 用CSS的border画三角形

    用border画三角形,实际上属于一种奇淫巧技. 利用的是border的一个特性:当一个元素的宽高都为0时,给border设置宽度(至少给2个相邻的边框设置宽度),border就会撑开这个元素. 四个 ...

  10. 用CSS画一个带阴影的三角形的示例代码

    1. 思路 怎么用CSS3画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗 网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题 假设我们做一个向下的三角形箭头 常见的方法大致有两种 ...

随机推荐

  1. Swift开发基础05-可选项

    可选项定义 可选项,一般也叫可选类型,它允许将值设置为nil 在类型名称后面加个问号? 来定义一个可选项 var name: String? = "Jack" name = nil ...

  2. .NET Core 3.x 基于AspectCore实现AOP，实现事务、缓存拦截器

    最近想给我的框架加一种功能,就是比如给一个方法加一个事务的特性Attribute,那这个方法就会启用事务处理.给一个方法加一个缓存特性,那这个方法就会进行缓存.这个也是网上说的面向切面编程AOP. A ...

  3. 2024 暑假友谊赛-热身2 （7.12）zhaosang

    E-E https://vjudge.net/problem/AtCoder-diverta2019_b 给你 a, b, c ,n就是问你有多少(ia+jb+k*c)等于n的答案i,j,k任意几个都 ...

  4. vue项目坑记录：vue项目运行卡在百分之几几几

    今天晚上打着游戏,同事突然叫我拉项目下来运行,我打完就去拉代码了,结果vue项目运行卡在66%不动了,我也是百度一下分享别人怎么解决的文章给他,继续我的游戏! 结果呢? 游戏结束后,我拉代码,还是这个 ...

  5. 【JavaScript高级03】执行上下文和执行上下文栈

    1,函数提升和变量提升 编写以下代码: var a = 3 function fn () { console.log(a) var a = 4 } fn() 上面的JavaScript代码执行结果为一 ...

  6. Vue 基于vue-codemirror实现的代码编辑器

    基于vue-codemirror实现的代码编辑器 开发环境 jshint 2.11.1 jsonlint 1.6.3 script-loader 0.7.2 vue 2.6.11 vue-codemi ...

  7. 《最新出炉》系列初窥篇-Python+Playwright自动化测试-61 - 隐藏元素定位与操作

    1.简介 对于前端隐藏元素,一直是自动化定位元素的隐形杀手,让人防不胜防.脚本跑到隐藏元素时位置时报各种各样的错误,可是这种隐藏的下拉菜单又没有办法避免,所以非常头痛,这一篇只为交流隐藏元素自动化定位 ...

  8. 强化学习算法：Learning to Learn: Meta-Critic Networks for Sample Efficient Learning

    地址: https://arxiv.org/pdf/1706.09529 作者提出了一种叫做Meta-Critic的框架,该框架可以用于强化学习.监督学习等算法中.该算法在强化学习中可以实现元强化学习 ...

  9. 【转载】 nvidia-smi - Persistence-M (Persistence Mode)

    原文链接: https://blog.csdn.net/chengyq116/article/details/103224622 版权声明:本文为CSDN博主「Yongqiang Cheng」的原创文 ...

  10. 【VMware ESXi】把硬盘当内存用？VMware 内存分层(Memory Tiering)，你值得拥有！

    VMware vSphere 8.0 U3 发布了一个非常有意义的功能叫内存分层(Memory Tiering),以利用基于 PCIe 的 NVMe 设备充当第二层(辅助)内存,从而使 ESXi 主机 ...