CSS 奇思妙想 | Single Div 繪圖技巧

ChokCoco發表於2021-06-01

經常能看到有關 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，雖然業務中不一定會用上：)

這裡再推薦幾個單標籤繪圖的網站，你可以看看再模仿模仿：

好了，本文到此結束，希望對你有幫助 ?

更多精彩 CSS 技術文章彙總在我的 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏。

如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。

奇思妙想 CSS 文字動畫
2021-03-08
CSS動畫
CSS 奇思妙想之酷炫倒影
2023-01-12
CSS
CSS 奇思妙想邊框動畫
2021-01-18
CSS動畫
CSS奇思妙想 -- 使用 CSS 創造藝術
2021-01-27
CSS
CSS 奇思妙想 | 全相容的毛玻璃效果
2021-06-30
CSS
原始碼篇：ThreadLocal的奇思妙想（萬字圖文）
2021-05-06
原始碼thread
CSS 還能這樣玩？奇思妙想漸變的藝術
2021-09-09
CSS
CSS 奇思妙想 | 使用 resize 實現強大的圖片拖拽切換預覽功能
2021-08-17
CSS
iOS奇思妙想之使用block替代通知
2018-08-16
iOSBloC
奇思妙想 CSS 3D 動畫 | 僅使用 CSS 能製作出多驚豔的動畫？
2021-08-24
CSS3D動畫
CSS 奇思妙想 | 巧妙的實現帶圓角的三角形
2021-07-14
CSS
奇思妙想，獲取對方手機通訊錄
2020-10-02
Eureka中讀寫鎖的奇思妙想，學廢了嗎？
2021-06-28
奇思妙想：用遊戲來做城市規劃靠不靠譜？
2021-11-19
遊戲
奇思妙想的SQL｜去重Cube計算最佳化新思路
2023-12-26
SQL
純div+css3程式碼繪製kitty貓
2019-05-11
CSSS3
語音廳專案3502255繪製思維導圖的技巧有哪些
2022-05-22
css繪製特殊圖形
2018-12-11
CSS
使用css繪製圖形
2019-03-13
CSS
不定期更新的CSS奇淫技巧（一）
2018-06-06
CSS
不定期更新的CSS奇淫技巧（二）
2018-08-07
CSS
Matplotlib直方圖繪製技巧
2022-02-03
直方圖
現代 CSS 高階技巧，像 Canvas 一樣自由繪圖構建樣式！
2022-12-12
CSSCanvas繪圖
CSS div居中
2018-08-16
CSS
CSS3繪製圖形圖案效果
2018-07-20
CSSS3
思維導圖教程是什麼？該怎樣繪製思維導圖？
2020-03-10
Affinity Designer繪製圖示的技巧分享
2021-11-11
CSS div居中效果
2018-08-16
CSS
純CSS漸變繪製 Chrome 圖示
2023-05-08
CSSChrome
div+css3程式碼繪製機器貓、哆啦A夢藍胖子
2019-05-11
CSSS3
ConceptDraw MINDMAP for Mac - 思維導圖繪製軟體
2022-02-16
Mac
[Python] Matplotlib 圖表的繪製和美化技巧
2021-02-20
Python
PlantUML --- 使用程式碼快速繪製時序圖、思維導圖
2021-05-20
時序圖
CSS浮動一：div
2020-12-21
CSS
css3知識點思維導圖
2019-03-30
CSSS3
記：css繪製小豬佩奇的專案及踩過的坑
2019-02-24
CSS
常用的思維導圖繪製軟體有哪些
2019-10-10
辦公小技巧，OmniGraffle繪製流程圖方法分享
2020-11-26
流程圖