关于前端:纯CSS渐变绘制-Chrome-图标

欢送关注我的公众号：前端侦探

明天学习一下利用 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 大利用举例

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

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

上面来绘制绿色的局部，其实是一个起始角度为 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 (runjs.work)
CSS chrome (codepen.io)

以上就是通过 CSS 突变绘制出一个 Chrome 图标的全副过程了，没有用到任何额定标签（包含伪元素），再次感叹 CSS 突变的弱小。上面总结一下

简单的图形须要通过拆分转换成相熟的形态
径向突变中的 closest-side，示意 最近的边，能够依据背景尺寸间接管制圆的大小
多背景的状况下，后面的背景层级 > 前面的背景层级
以前旋转的矩形只能通过 CSS transform能力实现，当初能够借助锥形突变来实现
CSS 三角函数能够很不便的计算角度和地位的关系

最初，如果感觉还不错，对你有帮忙的话，欢送点赞、珍藏、转发❤❤❤

欢送关注我的公众号：前端侦探

关于前端:纯CSS渐变绘制-Chrome-图标

一、图形拆解

二、径向突变

三、锥形突变

四、总结一下