纯 CSS 渐变绘制 Chrome 图标

CSS绘图系列又来啦！今天学习一下利用 CSS 渐变来绘制一个 Chrome 图标，如下

image-20230415133401723

如何仅使用渐变而不借助其他标签呢？一起看看如何实现的吧

一、图形拆解

乍一看好像没法直接通过渐变写出来，所以需要对图形进行简单的拆分。

中间的圆圈没有什么难度，主要是周围的“扇形”，但是好像又不是完整的“扇形”，互相都有遮挡

经过一番思索，可以分解成这样的几个图形，如下

image-20230415140532088

这下每个部分是不是都可以用渐变写出来了呢？

二、径向渐变

假设 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-*是完全相同的，各自的区别如下所示

image-20230415143458908

可以得到这样的效果

image-20230415143259828

三、锥形渐变

下面再来绘制周围的“扇形”。

其实就是几个旋转角度的矩形，在以前，这种矩形只能通过 dom 元素，利用 CSS transform才能实现。不过现在可以借助锥形渐变来实现这样的效果了

有兴趣的可以参考之前这篇文章：锥形渐变只能画圆锥吗？conic-gradient 10大应用举例^[1]

Kapture 2023-03-18 at 14.01.10

在绘制之前，需要搞清楚背景的先后顺序，一句话概括就是：

多背景的情况下，前面的背景层级 > 后面的背景层级

image-20230415144913568

下面来绘制绿色的部分，其实是一个起始角度为 120deg，旋转角度为90deg的锥形渐变

image-20230415150350494

还有一个问题，旋转中心并不是在图形正中心，而是中间的圆三等分上的一个点，如果我们知道了中心点的位置还有偏移的角度，是不是可以算出旋转中心点的位置？如下

image-20230415152622834

根据以上位置关系，由于需要用的中间圆的半径，所以可以用一个 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
}

效果如下

image-20230415153429476

用同样的方式可以绘制出红色部分

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
}

效果如下

image-20230415153728607

是不是有点像了？其实还红色部分多了一点，需要用橙色盖住，其实就是这样

image-20230415153921457

可以通过锥形渐变或者线性渐变实现，这里采用锥形渐变实现

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
}

效果如下

image-20230415154119264

最后设置圆角就行了~下面是完整代码

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 图标🤡

image-20230415133401723

你也可以查看以下任意链接：

• CSS chrome (juejin.cn)^[2]
• CSS chrome (runjs.work)^[3]
• CSS chrome (codepen.io)^[4]

四、总结一下

以上就是通过 CSS 渐变绘制出一个 Chrome 图标的全部过程了，没有用到任何额外标签（包括伪元素），再次感叹 CSS 渐变的强大。下面总结一下

1. 复杂的图形需要通过拆分转换成熟悉的形状
2. 径向渐变中的closest-side，表示最近的边，可以根据背景尺寸直接控制圆的大小
3. 多背景的情况下，前面的背景层级 > 后面的背景层级
4. 以前旋转的矩形只能通过 CSS transform才能实现，现在可以借助锥形渐变来实现
5. 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