经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » CSS » 查看文章
CSS 奇思妙想 | Single Div 绘图技巧
来源：cnblogs　　作者：ChokCoco　　时间：2021/6/7 8:58:31　　对本文有异议

经常能看到有关 CSS 绘图的文章，譬如使用纯 HTML + CSS 绘制一幅哆啦 A 梦图画。实现的方式就是通过堆叠 div，一步一步实现图画中的一块一块。这种技巧本身没有什么问题，但是就是少了一些难度，只需要有耐心，很多图形还是能够被慢慢实现出来的。

基于 CSS 绘图的这个需求，逐渐又有了新的一个流派，单标签实现图形，也就是说，一个复杂的图形只借由一个标签完成，这个相对于能够无限使用标签，不断堆叠 div 来说，无疑难度上升了很多，也要求对 CSS 有着更深刻的理解。

譬如下面这个图形，就是由一个 div 元素完成，源自于 A Single Div：

image

本文就将介绍一些使用单标签绘图的技巧，并且使用这些技巧，借用单个标签去实现一些复杂图形~??

合理利用伪元素

虽然说是一个标签，但是几乎所有打着单标签实现图形标题的例子，其中都使用了 3 个元素。这就是单标签实现图形上最为核心的一部分：

我们除了元素本身的样式能够控制之外，还有元素的两个伪元素 -- ::before，::after，实际上一共是 3 个元素。

好，譬如下面这个心形图形，只能使用一个 div 实现它，该怎么做呢：

这种不规则的图形本身使用纯 CSS 是比较复杂的，通常会借助 SVG，当然在 CSS 中就是使用 clip-path。不过仔细观察图形，我们不需要 clip-path，尝试将图片分成 3 部分：

Wow，其实这里，我们只需要元素本身实现正方形，元素的两个伪元素利用绝对定位实现两个圆形，叠加在一起即可！完整的代码也非常简单：

  1. div {
  2.     position: relative;
  3.     transform: rotate(45deg);
  4.     background: rgba(255, 20, 147, 0.85);
  5.     width: 140px;
  6.     height: 140px;
  7. }
  8. div::before,
  9. div::after {
  10.     content: "";
  11.     position: absolute;
  12.     top: 0;
  13.     left: -70px;
  14.     width: 140px;
  15.     height: 140px;
  16.     border-radius: 50%;
  17.     background: rgb(255, 20, 147);
  18. }
  19. div::before {
  20.     top: -70px;
  21.     left: 0;
  22. }

完整的示例代码，你可以戳这里 CodePen Demo -- A Signle Div heartShape

渐变 & 多重渐变

毫不夸张的说，渐变是在单标签实现图形中，使用的最多的一个 CSS 属性。

原因就在于我们渐变是可以多重渐变的！渐变不仅仅只能是单个的 linear-gradient 或者单个的 radial-gradient，对于 background 而言，它是支持多重渐变的叠加的，一点非常重要。

好，我们来看看这个太极图：

其实太极图就是由多个不同颜色的圆组成，这里堆叠多个不同的 div，并且把他们组合在一起肯定是 OK 的。但是我们的目标是使用单个标签完成。

当图形全是圆或者线条，就应该考虑使用多重线性（径向）渐变了，我们可以将上图拆解一下。

它其实是由 1 个线性渐变加上 4 个径向渐变生成的圆组成：

所以，一个太极图完整的代码只需要一个 div 即可，甚至都不需要伪元素的辅助：

  1. div {
  2.     width: 200px;
  3.     height: 200px;
  4.     border-radius: 50%;
  5.     background-image: radial-gradient(#000 12.5px, transparent 12.5px),
  6.         radial-gradient(#fff 12.5px, transparent 12.5px),
  7.         radial-gradient(#fff 50px, transparent 50px),
  8.         radial-gradient(#000 50px, transparent 50px),
  9.         linear-gradient(90deg, #000 100px, #fff 100px);
  10.     background-position: center 50px, center -50px, center 50px, center -50px, 0 0;
  11. }

完整的示例代码，你可以戳这里 CodePen Demo -- A Single Div PURE CSS Tai Chi

阴影 & 多重阴影

与渐变非常类似的一个属性就是阴影 box-shadow，box-shadow 属性它的一个特点也是可以叠加多层的，可以内置多条阴影规则，它简直就是单标签绘图的终极大杀器！

我们尝试使用一个 div 实现如下图形：

乍一看，这个图形其实还是很复杂的，云朵、雨滴都不像是仅仅用一个标签或者一个伪元素能够实现的。

实则不然，首先我们看看这个云朵，虽然带有不规则的轮廓，但是实际上就是一个一个的圆。非常适合使用多重径向渐变或者是多重阴影！

其实就是一个实现圆，然后利用阴影实现多个圆的叠加，示例动画，一看就懂：

代码量其实也非常少，实现一个云朵的代码：

  1. div{
  2.   width:100px;
  3.   height:100px;
  4.   background:#fff;
  5.   border-radius:50%;
  6.   box-shadow:
  7.     120px 0px 0 -10px #fff,
  8.     95px 20px 0 0px #fff,
  9.     30px 30px 0 -10px #fff,
  10.     90px -20px 0 0px #fff,
  11.     40px -40px 0 0px #fff;
  12. }

CodePen Demo -- A Single Div Cloudy

与云朵的示例代码类似，雨滴其实也是借助了多重阴影实现：

  1. div {
  2.     position: absolute;
  3.     width: 3px;
  4.     height: 6px;
  5.     border-radius: 50%;
  6.     animation: rainy_rain 0.7s infinite linear;
  7.     box-shadow: rgba(0, 0, 0, 0) -10px 30px, rgba(0, 0, 0, 0) 40px 40px,
  8.             rgba(0, 0, 0, 0.3) -50px 75px, rgba(0, 0, 0, 0.3) 55px 50px,
  9.             rgba(0, 0, 0, 0.3) -18px 100px, rgba(0, 0, 0, 0.3) 12px 95px,
  10.             rgba(0, 0, 0, 0.3) -31px 45px, rgba(0, 0, 0, 0.3) 30px 35px;
  11. }
  13. @keyframes rainy_rain {
  14.     0% {
  15.         box-shadow: rgba(0, 0, 0, 0) -10px 30px, rgba(0, 0, 0, 0) 40px 40px,
  16.             rgba(0, 0, 0, 0.3) -50px 75px, rgba(0, 0, 0, 0.3) 55px 50px,
  17.             rgba(0, 0, 0, 0.3) -18px 100px, rgba(0, 0, 0, 0.3) 12px 95px,
  18.             rgba(0, 0, 0, 0.3) -31px 45px, rgba(0, 0, 0, 0.3) 30px 35px;
  19.     }
  20.     // 省略部分阴影位移帧动画代码
  21.     ...
  22.     100% {
  23.         box-shadow: rgba(0, 0, 0, 0) -10px 120px, rgba(0, 0, 0, 0) 40px 120px,
  24.             rgba(0, 0, 0, 0.3) -50px 75px, rgba(0, 0, 0, 0.3) 55px 50px,
  25.             rgba(0, 0, 0, 0.3) -18px 100px, rgba(0, 0, 0, 0.3) 12px 95px,
  26.             rgba(0, 0, 0, 0.3) -31px 45px, rgba(0, 0, 0, 0.3) 30px 35px;
  27.     }
  28. }

刚刚已经使用了元素本身和元素的一个伪元素，剩余一个伪元素实现底部的阴影圆即可，完整的 Demo 代码你可以戳这里：A Signle Div Rainy

简单总结一下

到这里，可以简单总结一下，单标签实现图形，尤其是复杂图形，很大程度上都是借助了上述的 3 个技巧，也就是：

  • 单标签绘图，其实是使用元素本身和它的两个伪元素 ::before 和 ::after
  • 合理使用多重渐变叠加
  • 合理使用多重阴影叠加

练习一下

我们练习一下，使用单个 div 实现下面这个美队盾牌：

有了上面的铺垫，其实多重的圆形使用多重径向渐变和多重阴影都是都是可以的，而中间的星星，使用字符或者 clip-path 也能非常轻松的实现：

  1. div {
  2.     position: absolute;
  3.     width: 200px;
  4.     height: 200px;
  5.     background: 
  6.         radial-gradient(
  7.             at center,
  8.             #0033b0 20%,
  9.             #ce0021 20%,
  10.             #ce0021 35%,
  11.             #eee 35%,
  12.             #eee 55%,
  13.             #ce0021 55%
  14.         );
  15.     border-radius: 50%;
  16. }
  17. div::before {
  18.     content: "★";
  19.     position: absolute;
  20.     top: 50%;
  21.     left: 50%;
  22.     transform: translate(-50%, -50%);
  23.     line-height: 47px;
  24.     font-size: 55px;
  25. }

我们会得到这样一个图形：

感觉图形少了一些光泽，我们可以往 div 上继续叠加一些 linear-gradient，给盾牌表面添加一些高光：

  1. div {
  2.     position: absolute;
  3.     width: 200px;
  4.     height: 200px;
  5.     background: linear-gradient(45deg,  rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 65%),
  6.         linear-gradient(-45deg, rgba(255, 255, 255, 0) 35%,  rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 65%),
  7.         linear-gradient(to right, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) 65%),
  8.         linear-gradient(to bottom, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) 65%),
  9.         radial-gradient(
  10.             ellipse at center,
  11.             #0033b0 20%,
  12.             #ce0021 20%,
  13.             #ce0021 35%,
  14.             #eee 35%,
  15.             #eee 55%,
  16.             #ce0021 55%
  17.         );
  18.     border-radius: 50%;
  19. }
  20. div::before {
  21.     content: "★";
  22.     position: absolute;
  23.     top: 50%;
  24.     left: 50%;
  25.     transform: translate(-50%, -50%);
  26.     line-height: 47px;
  27.     font-size: 55px;
  28. }

OK，便能完美的实现：

完整的代码你可以戳这里：A Signle Div Shield

单个标签实现一个磁带

我们再看看这个图形，一个磁带图形：

看着很复杂，其实都是圆和各种线条，其实也是适合使用单个标签实现的，就是非常的花时间，需要精细的控制 background-image 里面的每个渐变的 background-size、background-position：

首先，借由多重渐变，实现整个背景结构：

  1. div {
  2.     width: 180px;
  3.     height: 120px;
  4.     border-radius: 5px;
  5.     background-image: linear-gradient(to right, #444 10px, transparent 10px),
  6.         linear-gradient(to left, #444 10px, transparent 10px),
  7.         linear-gradient(135deg, #444 20px, transparent 20px),
  8.         linear-gradient(-135deg, #444 20px, transparent 20px),
  9.         linear-gradient(
  10.             to bottom,
  11.             transparent 35px,
  12.             #be0974 35px,
  13.             #be0974 43px,
  14.             #da6a57 43px,
  15.             #da6a57 51px,
  16.             #eebc31 51px,
  17.             #eebc31 59px,
  18.             #92a25b 59px,
  19.             #92a25b 67px,
  20.             #46a7c0 67px,
  21.             #46a7c0 75px,
  22.             transparent 75px
  23.         ),
  24.         linear-gradient(
  25.             to bottom,
  26.             transparent 10px,
  27.             #f7f7f7 10px,
  28.             #f7f7f7 85px,
  29.             transparent 85px
  30.         ),
  31.         linear-gradient(to top, transparent 26px, #444 26px),
  32.         linear-gradient(
  33.             105deg,
  34.             #444 70px,
  35.             #333 70px,
  36.             #333 73px,
  37.             transparent 73px
  38.         ),
  39.         linear-gradient(
  40.             -105deg,
  41.             #444 70px,
  42.             #333 70px,
  43.             #333 73px,
  44.             transparent 73px
  45.         ),
  46.         linear-gradient(to top, #444 24px, #777 24px, #777 26px, #444 26px);
  47.     box-shadow: -4px -4px 2px rgb(0 0 0 / 20%);
  48. }

得到如下图形：

通过其中一个伪元素，利用 box-shadow 实现磁带上的各个圆圈点：

  1. div:after {
  2.     position: absolute;
  3.     content: "";
  4.     width: 5px;
  5.     height: 5px;
  6.     background: #999;
  7.     border-radius: 50%;
  8.     box-shadow: 165px 0 0 #999, 0 104px 0 #999, 165px 104px 0 #999, 55px 101px 0 1px #222, 68px 98px 0 1px #222, 98px 98px 0 1px #222, 110px 101px 0 1px #222, 51px 38px 0 #444, 114px 38px 0 #444, 44px 46px 0 #444, 58px 46px 0 #444, 107px 46px 0 #444, 121px 46px 0 #444, 51px 53px 0 #444, 114px 53px 0 #444, 51px 46px 0 6px #ccc, 114px 46px 0 6px #ccc;
  9.     left: 5px;
  10.     top: 5px;
  11. }

最后剩下的一个伪元素，实现磁带中间的部分样式即可：

  1. div:before {
  2.     position: absolute;
  3.     content: "";
  4.     width: 90px;
  5.     height: 26px;
  6.     margin-left: -45px;
  7.     left: 50%;
  8.     top: 41px;
  9.     background-color: #ccc;
  10.     background-image: linear-gradient(to bottom, #444 5px, transparent 5px),
  11.         linear-gradient(to top, #444 5px, transparent 5px),
  12.         linear-gradient(to right, #444 30px, transparent 30px),
  13.         linear-gradient(to left, #444 30px, transparent 30px),
  14.         radial-gradient(circle at 10px 12px, #a0522d 32px, transparent 32px);
  15.     border-radius: 30px;
  16. }

这样，就顺利使用单个标签实现啦，该 Demo 取自 A Single Div，完整的代码你可以戳这里：CodePen Demo -- A single Div Disk。

当然，单标签能实现的远不止如此，看看下面这些，都是一个 div 能够实现的：

配合其它高阶属性

当然，上述的作图都还是比较常规的，借助伪元素，使用 background、使用 box-shadow。我们还可以尝试在一个 div 内增加混合模式 mix-blend-mode、滤镜 filter 以及 遮罩 mask 等，实现一些更为有意思的效果。

譬如下述这个效果，使用了一个 div 实现的幽灵效果：

在用一个 div 实现基本效果之余，还加上了利用了 filter 滤镜实现了一些融合效果。

完整的代码你可以戳这里：CodePen Demo -- A Single Div Ghost

最后

只使用 CSS 进行单 div 绘图还是非常有意思的，也可以比较好的锻炼 CSS，虽然业务中不一定会用上 ：)

这里再推荐几个单标签绘图的网站，你可以看看再模仿模仿：

好了，本文到此结束，希望对你有帮助 ??

更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ，持续更新，欢迎点个 star 订阅收藏。

如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。

原文链接：http://www.cnblogs.com/coco1s/p/14836075.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

CSS热门文章

  • CSS实现文字两端对齐
  • 【WEB基础】HTML & CSS 基础入门（6）超链接
  • Javascript 对象 - 数学对象
  • 对移动端兼容适配的分析
  • Element FORM结合Vue实现横向排列表单项
  • 如何让一个input输入框居中
  • CSS Grid 布局完全指南(图解 Grid 详细教程)
  • css常见的各种布局上（两列布局）
  • vue+element导入导出excel
  • WEB前端动态背景集

    • CSS推荐文章

  • CSS布局概念与技术教程
  • 15 分钟带你感受 CSS :has() 选择器的强大 - xingba-coder
  • 现代 CSS 解决方案：文字颜色自动适配背景色！
  • 脚踏esbuild祥云，胸怀tsx利刃，身披scss羽衣，追寻前端的本质
  • 深入解析css-笔记
  • CSS 还原拉斯维加斯球数字动画
  • 震惊！CSS 也能实现碰撞检测？
  • 前端开发如何更好的避免样式冲突？级联层(CSS@layer)
  • 现代 CSS 解决方案：CSS 原生支持的三角函数
  • 利用css var函数让你的组件样式输出规范样式API，可定制性更高；

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号