純 CSS 漸變繪制 Chrome 圖標(biāo)
CSS繪圖系列又來(lái)啦！今天學(xué)習(xí)一下利用 CSS 漸變來(lái)繪制一個(gè) Chrome 圖標(biāo)，如下：
如何僅使用漸變而不借助其他標(biāo)簽?zāi)兀恳黄鹂纯慈绾螌?shí)現(xiàn)的吧！
一、圖形拆解
乍一看好像沒(méi)法直接通過(guò)漸變寫(xiě)出來(lái)，所以需要對(duì)圖形進(jìn)行簡(jiǎn)單的拆分。
中間的圓圈沒(méi)有什么難度，主要是周?chē)摹吧刃巍?，但是好像又不是完整的“扇形”，互相都有遮擋?/p>
經(jīng)過(guò)一番思索，可以分解成這樣的幾個(gè)圖形，如下：
這下每個(gè)部分是不是都可以用漸變寫(xiě)出來(lái)了呢？
二、徑向漸變
假設(shè) HTML 就一個(gè)標(biāo)簽。
<chrome></chrome>中間的圓圈其實(shí)是藍(lán)色→白色→透明的漸變，然后加上橙色的底色，用代碼實(shí)現(xiàn)就是。
chrome{
background: radial-gradient( closest-side circle, #477EE6 calc(100% - 10px), #fff 0 100%, transparent 0) center/90px no-repeat #F2C146;
}注意，這里使用了關(guān)鍵詞closest-side，表示最近的邊，好處是可以根據(jù)背景尺寸直接控制圓的大小，默認(rèn)值是farthest-side，其他選項(xiàng)詳細(xì)如下：
關(guān)鍵字 | 描述 |
closest-side | 漸變中心距離容器最近的邊作為終止位置。 |
closest-corner | 漸變中心距離容器最近的角作為終止位置。 |
farthest-side | 漸變中心距離容器最遠(yuǎn)的邊作為終止位置。 |
farthest-corner（默認(rèn)值） | 漸變中心距離容器最遠(yuǎn)的角作為終止位置。 |
當(dāng)然，對(duì)于完全對(duì)稱的容器，closest-* 和 farthest-*是完全相同的，各自的區(qū)別如下所示：
可以得到這樣的效果：
三、錐形漸變
下面再來(lái)繪制周?chē)摹吧刃巍薄?/p>
其實(shí)就是幾個(gè)旋轉(zhuǎn)角度的矩形，在以前，這種矩形只能通過(guò) dom 元素，利用 CSS transform才能實(shí)現(xiàn)。不過(guò)現(xiàn)在可以借助錐形漸變來(lái)實(shí)現(xiàn)這樣的效果了。
有興趣的可以參考之前這篇文章：錐形漸變只能畫(huà)圓錐嗎？conic-gradient 10大應(yīng)用舉例[1]。
在繪制之前，需要搞清楚背景的先后順序，一句話概括就是：
多背景的情況下，前面的背景層級(jí) > 后面的背景層級(jí)。
下面來(lái)繪制綠色的部分，其實(shí)是一個(gè)起始角度為 120deg，旋轉(zhuǎn)角度為90deg的錐形漸變。
還有一個(gè)問(wèn)題，旋轉(zhuǎn)中心并不是在圖形正中心，而是中間的圓三等分上的一個(gè)點(diǎn)，如果我們知道了中心點(diǎn)的位置還有偏移的角度，是不是可以算出旋轉(zhuǎn)中心點(diǎn)的位置？如下：
根據(jù)以上位置關(guān)系，由于需要用的中間圓的半徑，所以可以用一個(gè) CSS 變量來(lái)表示，用 CSS 實(shí)現(xiàn)就是。
chrome{
--size: 45%; /*用一個(gè)變量方便計(jì)算*/
background:
background: radial-gradient( closest-side circle, #477EE6 calc(100% - 10px), #fff calc(100% - 9.5px) 100%, transparent calc(100% + .5px)) center/var(--size) no-repeat,
/*綠色*/
conic-gradient(from 210deg at calc( 50% + calc(var(--size) / 2) * cos(30deg) ) calc( 50% + calc(var(--size) / 2) * sin(30deg) ), #539E55 100deg, transparent 0)
#F2C146
}注意，現(xiàn)代瀏覽器（Chrome 111+） 已經(jīng)支持了sin、cos數(shù)學(xué)函數(shù)。
https://developer.mozilla.org/en-US/docs/Web/CSS/sin。
當(dāng)然，這里也可以改成具體的數(shù)值，比如 cos(30deg) 約等于 0.866，sin(30deg)等于0.5，所以可以改成。
chrome{
background:
background: radial-gradient( closest-side circle, #477EE6 calc(100% - 10px), #fff calc(100% - 9.5px) 100%, transparent calc(100% + .5px)) center/var(--size) no-repeat,
/*綠色*/
conic-gradient(from 210deg at calc( 50% + calc(var(--size) / 2) * 0.866) ) calc( 50% + calc(var(--size) / 2) * 0.5 ), #539E55 100deg, transparent 0)
/*橙色底色*/
#F2C146
}效果如下：
用同樣的方式可以繪制出紅色部分。
chrome{
background:
background: radial-gradient( closest-side circle, #477EE6 calc(100% - 10px), #fff calc(100% - 9.5px) 100%, transparent calc(100% + .5px)) center/var(--size) no-repeat,
/*紅色*/
conic-gradient(from 330deg at calc( 50% - calc(var(--size) / 2) * 0.866 ) calc( 50% + calc(var(--size) / 2) * .5 ), #D75442 100deg, transparent 0),
/*綠色*/
conic-gradient(from 210deg at calc( 50% + calc(var(--size) / 2) * 0.866) ) calc( 50% + calc(var(--size) / 2) * 0.5 ), #539E55 100deg, transparent 0)
/*橙色底色*/
#F2C146
}效果如下：
是不是有點(diǎn)像了？其實(shí)還紅色部分多了一點(diǎn)，需要用橙色蓋住，其實(shí)就是這樣。
可以通過(guò)錐形漸變或者線性漸變實(shí)現(xiàn)，這里采用錐形漸變實(shí)現(xiàn)。
chrome{
background:
background: radial-gradient( closest-side circle, #477EE6 calc(100% - 10px), #fff calc(100% - 9.5px) 100%, transparent calc(100% + .5px)) center/var(--size) no-repeat,
/*橙色部分*/
conic-gradient( #F2C146 90deg, transparent 0) 50% 50%/ 100% var(--size) no-repeat,
/*紅色*/
conic-gradient(from 330deg at calc( 50% - calc(var(--size) / 2) * 0.866 ) calc( 50% + calc(var(--size) / 2) * .5 ), #D75442 100deg, transparent 0),
/*綠色*/
conic-gradient(from 210deg at calc( 50% + calc(var(--size) / 2) * 0.866) ) calc( 50% + calc(var(--size) / 2) * 0.5 ), #539E55 100deg, transparent 0)
/*橙色底色*/
#F2C146
}效果如下：
最后設(shè)置圓角就行了~下面是完整代碼。
chrome{
width: 200px;
height: 200px;
border-radius: 50%;
--size: 45%;
background: radial-gradient( closest-side circle, #477EE6 calc(100% - 10px), #fff calc(100% - 9.5px) 100%, transparent calc(100% + .5px)) center/var(--size) no-repeat,
conic-gradient( #F2C146 90deg, transparent 0) 50% 50%/ 100% var(--size) no-repeat,
conic-gradient(from 330deg at calc( 50% - calc(var(--size) / 2) * 0.866 ) calc( 50% + calc(var(--size) / 2) * .5 ), #D75442 100deg, transparent 0),
conic-gradient(from 210deg at calc( 50% + calc(var(--size) / 2) * 0.866 ) calc( 50% + calc(var(--size) / 2) * .5 ), #539E55 100deg, transparent 0),
#F2C146
}這樣就繪制出了一個(gè) Chrome 圖標(biāo)。
你也可以查看以下任意鏈接：
- CSS chrome (juejin.cn)[2]
- CSS chrome (runjs.work)[3]
- CSS chrome (codepen.io)[4]
四、總結(jié)一下
以上就是通過(guò) CSS 漸變繪制出一個(gè) Chrome 圖標(biāo)的全部過(guò)程了，沒(méi)有用到任何額外標(biāo)簽（包括偽元素），再次感嘆 CSS 漸變的強(qiáng)大。下面總結(jié)一下。
- 復(fù)雜的圖形需要通過(guò)拆分轉(zhuǎn)換成熟悉的形狀。
- 徑向漸變中的closest-side，表示最近的邊，可以根據(jù)背景尺寸直接控制圓的大小。
- 多背景的情況下，前面的背景層級(jí) > 后面的背景層級(jí)。
- 以前旋轉(zhuǎn)的矩形只能通過(guò) CSS transform才能實(shí)現(xiàn)，現(xiàn)在可以借助錐形漸變來(lái)實(shí)現(xiàn)。
- CSS 三角函數(shù)可以很方便的計(jì)算角度和位置的關(guān)系。
參考資料
[1]錐形漸變只能畫(huà)圓錐嗎？conic-gradient 10大應(yīng)用舉例: https://juejin.cn/post/7212101184709247033。
[2]CSS chrome (juejin.cn): https://code.juejin.cn/pen/7222179595339235380。
[3]CSS chrome (runjs.work): https://runjs.work/projects/1781bb9104af4dbe。
[4]CSS chrome (codepen.io): https://codepen.io/xboxyan/pen/ZEqBdEK。
