常常能看到无关 CSS 绘图的文章，譬如应用纯 HTML + CSS 绘制一幅哆啦 A 梦图画。实现的形式就是通过重叠 div，一步一步实现图画中的一块一块。这种技巧自身没有什么问题，然而就是少了一些难度，只须要有急躁，很多图形还是可能被缓缓实现进去的。
基于 CSS 绘图的这个需要，逐步又有了新的一个流派，单标签实现图形，也就是说，一个简单的图形只借由一个标签实现，这个绝对于可能有限应用标签，一直重叠 div 来说，无疑难度回升了很多，也要求对 CSS 有着更粗浅的了解。
譬如上面这个图形，就是由一个 div 元素实现，源自于 A Single Div：
本文就将介绍一些应用单标签绘图的技巧，并且应用这些技巧，借用单个标签去实现一些简单图形~
正当利用伪元素
尽管说是一个标签，然而简直所有打着单标签实现图形题目的例子，其中都应用了 3 个元素。这就是单标签实现图形上最为外围的一部分：
咱们除了元素自身的款式可能管制之外，还有元素的两个伪元素 -- ::before，::after，实际上一共是 3 个元素。
好，譬如上面这个心形图形，只能应用一个 div 实现它，该怎么做呢：
这种不规则的图形自身应用纯 CSS 是比较复杂的，通常会借助 SVG，当然在 CSS 中就是应用 clip-path。不过仔细观察图形，咱们不须要 clip-path，尝试将图片分成 3 局部：
Wow，其实这里，咱们只须要元素自身实现正方形，元素的两个伪元素利用相对定位实现两个圆形，叠加在一起即可！残缺的代码也非常简单：
div { position: relative; transform: rotate(45deg); background: rgba(255, 20, 147, 0.85); width: 140px; height: 140px;}div::before,div::after { content: ""; position: absolute; top: 0; left: -70px; width: 140px; height: 140px; border-radius: 50%; background: rgb(255, 20, 147);}div::before { top: -70px; left: 0;}残缺的示例代码，你能够戳这里 CodePen Demo -- A Signle Div heartShape
突变 & 多重突变
毫不夸大的说，突变是在单标签实现图形中，应用的最多的一个 CSS 属性。
起因就在于咱们突变是能够多重突变的！突变不仅仅只能是单个的 linear-gradient 或者单个的 radial-gradient，对于 background 而言，它是反对多重突变的叠加的，一点十分重要。
好，咱们来看看这个太极图：
其实太极图就是由多个不同色彩的圆组成，这里重叠多个不同的 div，并且把他们组合在一起必定是 OK 的。然而咱们的指标是应用单个标签实现。
当图形全是圆或者线条，就应该思考应用多重线性（径向）突变了，咱们能够将上图拆解一下。
它其实是由 1 个线性突变加上 4 个径向突变生成的圆组成：
所以，一个太极图残缺的代码只须要一个 div 即可，甚至都不须要伪元素的辅助：
div { width: 200px; height: 200px; border-radius: 50%; background-image: radial-gradient(#000 12.5px, transparent 12.5px), radial-gradient(#fff 12.5px, transparent 12.5px), radial-gradient(#fff 50px, transparent 50px), radial-gradient(#000 50px, transparent 50px), linear-gradient(90deg, #000 100px, #fff 100px); background-position: center 50px, center -50px, center 50px, center -50px, 0 0;}残缺的示例代码，你能够戳这里 CodePen Demo -- A Single Div PURE CSS Tai Chi
暗影 & 多重暗影
与突变十分相似的一个属性就是暗影 box-shadow，box-shadow 属性它的一个特点也是能够叠加多层的，能够内置多条暗影规定，它几乎就是单标签绘图的终极大杀器！
咱们尝试应用一个 div 实现如下图形：
乍一看，这个图形其实还是很简单的，云朵、雨滴都不像是仅仅用一个标签或者一个伪元素可能实现的。
实则不然，首先咱们看看这个云朵，尽管带有不规则的轮廓，然而实际上就是一个一个的圆。非常适合应用多重径向突变或者是多重暗影！
其实就是一个实现圆，而后利用暗影实现多个圆的叠加，示例动画，一看就懂：
代码量其实也非常少，实现一个云朵的代码：
div{ width:100px; height:100px; background:#fff; border-radius:50%; box-shadow: 120px 0px 0 -10px #fff, 95px 20px 0 0px #fff, 30px 30px 0 -10px #fff, 90px -20px 0 0px #fff, 40px -40px 0 0px #fff;}CodePen Demo -- A Single Div Cloudy
与云朵的示例代码相似，雨滴其实也是借助了多重暗影实现：
div { position: absolute; width: 3px; height: 6px; border-radius: 50%; animation: rainy_rain 0.7s infinite linear; box-shadow: rgba(0, 0, 0, 0) -10px 30px, rgba(0, 0, 0, 0) 40px 40px, rgba(0, 0, 0, 0.3) -50px 75px, rgba(0, 0, 0, 0.3) 55px 50px, rgba(0, 0, 0, 0.3) -18px 100px, rgba(0, 0, 0, 0.3) 12px 95px, rgba(0, 0, 0, 0.3) -31px 45px, rgba(0, 0, 0, 0.3) 30px 35px;}@keyframes rainy_rain { 0% { box-shadow: rgba(0, 0, 0, 0) -10px 30px, rgba(0, 0, 0, 0) 40px 40px, rgba(0, 0, 0, 0.3) -50px 75px, rgba(0, 0, 0, 0.3) 55px 50px, rgba(0, 0, 0, 0.3) -18px 100px, rgba(0, 0, 0, 0.3) 12px 95px, rgba(0, 0, 0, 0.3) -31px 45px, rgba(0, 0, 0, 0.3) 30px 35px; } // 省略局部暗影位移帧动画代码 ... 100% { box-shadow: rgba(0, 0, 0, 0) -10px 120px, rgba(0, 0, 0, 0) 40px 120px, rgba(0, 0, 0, 0.3) -50px 75px, rgba(0, 0, 0, 0.3) 55px 50px, rgba(0, 0, 0, 0.3) -18px 100px, rgba(0, 0, 0, 0.3) 12px 95px, rgba(0, 0, 0, 0.3) -31px 45px, rgba(0, 0, 0, 0.3) 30px 35px; }}刚刚曾经应用了元素自身和元素的一个伪元素，残余一个伪元素实现底部的暗影圆即可，残缺的 Demo 代码你能够戳这里：A Signle Div Rainy
简略总结一下
到这里，能够简略总结一下，单标签实现图形，尤其是简单图形，很大水平上都是借助了上述的 3 个技巧，也就是：
- 单标签绘图，其实是应用元素自身和它的两个伪元素
::before和::after - 正当应用多重突变叠加
- 正当应用多重暗影叠加
练习一下
咱们练习一下，应用单个 div 实现上面这个美队盾牌：
有了下面的铺垫，其实多重的圆形应用多重径向突变和多重暗影都是都是能够的，而两头的星星，应用字符或者 clip-path 也能十分轻松的实现：
div { position: absolute; width: 200px; height: 200px; background: radial-gradient( at center, #0033b0 20%, #ce0021 20%, #ce0021 35%, #eee 35%, #eee 55%, #ce0021 55% ); border-radius: 50%;}div::before { content: "★"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); line-height: 47px; font-size: 55px;}咱们会失去这样一个图形：
感觉图形少了一些光泽，咱们能够往 div 上持续叠加一些 linear-gradient，给盾牌外表增加一些高光：
div { position: absolute; width: 200px; height: 200px; background: linear-gradient(45deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 65%), linear-gradient(-45deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 65%), linear-gradient(to right, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) 65%), linear-gradient(to bottom, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) 65%), radial-gradient( ellipse at center, #0033b0 20%, #ce0021 20%, #ce0021 35%, #eee 35%, #eee 55%, #ce0021 55% ); border-radius: 50%;}div::before { content: "★"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); line-height: 47px; font-size: 55px;}OK，便能完满的实现：
残缺的代码你能够戳这里：A Signle Div Shield
单个标签实现一个磁带
咱们再看看这个图形，一个磁带图形：
看着很简单，其实都是圆和各种线条，其实也是适宜应用单个标签实现的，就是十分的花工夫，须要精密的管制 background-image 外面的每个突变的 background-size、background-position：
首先，借由多重突变，实现整个背景构造：
div { width: 180px; height: 120px; border-radius: 5px; background-image: linear-gradient(to right, #444 10px, transparent 10px), linear-gradient(to left, #444 10px, transparent 10px), linear-gradient(135deg, #444 20px, transparent 20px), linear-gradient(-135deg, #444 20px, transparent 20px), linear-gradient( to bottom, transparent 35px, #be0974 35px, #be0974 43px, #da6a57 43px, #da6a57 51px, #eebc31 51px, #eebc31 59px, #92a25b 59px, #92a25b 67px, #46a7c0 67px, #46a7c0 75px, transparent 75px ), linear-gradient( to bottom, transparent 10px, #f7f7f7 10px, #f7f7f7 85px, transparent 85px ), linear-gradient(to top, transparent 26px, #444 26px), linear-gradient( 105deg, #444 70px, #333 70px, #333 73px, transparent 73px ), linear-gradient( -105deg, #444 70px, #333 70px, #333 73px, transparent 73px ), linear-gradient(to top, #444 24px, #777 24px, #777 26px, #444 26px); box-shadow: -4px -4px 2px rgb(0 0 0 / 20%);}失去如下图形：
通过其中一个伪元素，利用 box-shadow 实现磁带上的各个圆圈点：
div:after { position: absolute; content: ""; width: 5px; height: 5px; background: #999; border-radius: 50%; 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; left: 5px; top: 5px;}最初剩下的一个伪元素，实现磁带两头的局部款式即可：
div:before { position: absolute; content: ""; width: 90px; height: 26px; margin-left: -45px; left: 50%; top: 41px; background-color: #ccc; background-image: linear-gradient(to bottom, #444 5px, transparent 5px), linear-gradient(to top, #444 5px, transparent 5px), linear-gradient(to right, #444 30px, transparent 30px), linear-gradient(to left, #444 30px, transparent 30px), radial-gradient(circle at 10px 12px, #a0522d 32px, transparent 32px); border-radius: 30px;}这样，就顺利应用单个标签实现啦，该 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，尽管业务中不肯定会用上 ：)
这里再举荐几个单标签绘图的网站，你能够看看再模拟模拟：
- A Single Div
- MagicCSS
- CodePen - Single Div
好了，本文到此结束，心愿对你有帮忙 :)
想 Get 到最有意思的 CSS 资讯，千万不要错过我的公众号 -- iCSS前端趣闻
更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ，继续更新，欢送点个 star 订阅珍藏。
如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。