純 CSS 漸變繪制 Chrome 圖標
CSS繪圖系列又來啦！今天學習一下利用 CSS 漸變來繪制一個 Chrome 圖標，如下：
如何僅使用漸變而不借助其他標簽呢？一起看看如何實現的吧！
一、圖形拆解
乍一看好像沒法直接通過漸變寫出來，所以需要對圖形進行簡單的拆分。
中間的圓圈沒有什么難度，主要是周圍的“扇形”，但是好像又不是完整的“扇形”，互相都有遮擋。
經過一番思索，可以分解成這樣的幾個圖形，如下：
這下每個部分是不是都可以用漸變寫出來了呢？
二、徑向漸變
假設 HTML 就一個標簽。
<chrome></chrome>中間的圓圈其實是藍色→白色→透明的漸變，然后加上橙色的底色，用代碼實現就是。
chrome{
background: radial-gradient( closest-side circle, #477EE6 calc(100% - 10px), #fff 0 100%, transparent 0) center/90px no-repeat #F2C146;
}注意，這里使用了關鍵詞closest-side，表示最近的邊，好處是可以根據背景尺寸直接控制圓的大小，默認值是farthest-side，其他選項詳細如下：
關鍵字 | 描述 |
closest-side | 漸變中心距離容器最近的邊作為終止位置。 |
closest-corner | 漸變中心距離容器最近的角作為終止位置。 |
farthest-side | 漸變中心距離容器最遠的邊作為終止位置。 |
farthest-corner（默認值） | 漸變中心距離容器最遠的角作為終止位置。 |
當然，對于完全對稱的容器，closest-* 和 farthest-*是完全相同的，各自的區別如下所示：
可以得到這樣的效果：
三、錐形漸變
下面再來繪制周圍的“扇形”。
其實就是幾個旋轉角度的矩形，在以前，這種矩形只能通過 dom 元素，利用 CSS transform才能實現。不過現在可以借助錐形漸變來實現這樣的效果了。
有興趣的可以參考之前這篇文章：錐形漸變只能畫圓錐嗎？conic-gradient 10大應用舉例[1]。
在繪制之前，需要搞清楚背景的先后順序，一句話概括就是：
多背景的情況下，前面的背景層級 > 后面的背景層級。
下面來繪制綠色的部分，其實是一個起始角度為 120deg，旋轉角度為90deg的錐形漸變。
還有一個問題，旋轉中心并不是在圖形正中心，而是中間的圓三等分上的一個點，如果我們知道了中心點的位置還有偏移的角度，是不是可以算出旋轉中心點的位置？如下：
根據以上位置關系，由于需要用的中間圓的半徑，所以可以用一個 CSS 變量來表示，用 CSS 實現就是。
chrome{
--size: 45%; /*用一個變量方便計算*/
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
}注意，現代瀏覽器（Chrome 111+） 已經支持了sin、cos數學函數。
https://developer.mozilla.org/en-US/docs/Web/CSS/sin。
當然，這里也可以改成具體的數值，比如 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
}效果如下：
是不是有點像了？其實還紅色部分多了一點，需要用橙色蓋住，其實就是這樣。
可以通過錐形漸變或者線性漸變實現，這里采用錐形漸變實現。
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
}效果如下：
最后設置圓角就行了~下面是完整代碼。
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
}這樣就繪制出了一個 Chrome 圖標。
你也可以查看以下任意鏈接：
- CSS chrome (juejin.cn)[2]
- CSS chrome (runjs.work)[3]
- CSS chrome (codepen.io)[4]
四、總結一下
以上就是通過 CSS 漸變繪制出一個 Chrome 圖標的全部過程了，沒有用到任何額外標簽（包括偽元素），再次感嘆 CSS 漸變的強大。下面總結一下。
- 復雜的圖形需要通過拆分轉換成熟悉的形狀。
- 徑向漸變中的closest-side，表示最近的邊，可以根據背景尺寸直接控制圓的大小。
- 多背景的情況下，前面的背景層級 > 后面的背景層級。
- 以前旋轉的矩形只能通過 CSS transform才能實現，現在可以借助錐形漸變來實現。
- CSS 三角函數可以很方便的計算角度和位置的關系。
參考資料
[1]錐形漸變只能畫圓錐嗎？conic-gradient 10大應用舉例: 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。
