纯CSS渐变绘制 Chrome 图标

源码如下

<div class="chrome"></div>

<style>
.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
}	
</style>

总结

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

1. 复杂的图形需要通过拆分转换成熟悉的形状
2. 径向渐变中的closest-side，表示最近的边，可以根据背景尺寸直接控制圆的大小
3. 多背景的情况下，前面的背景层级 > 后面的背景层级
4. 以前旋转的矩形只能通过 CSS transform才能实现，现在可以借助锥形渐变来实现
5. CSS 三角函数可以很方便的计算角度和位置的关系

来源：https://segmentfault.com/a/1190000043759845

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/course/33_1630