持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第11天，点击查看活动详情

前言

前面使用css，实现一些实用小功能居多，今天我突发奇想，能不能用css实现一个chrome logo，说干就干，先放张logo参考一下。咚咚咚，划重点，仔细看下面这张logo图，我画出来的地方，为什么会有一些黑色的阴影？在此声明，网图，不是我自己加的黑色三角。原图链接

说这么多，先来实现这三个奇形怪状的玩意。然后组合，变成logo。

老规矩，先看页面结构。在此我只放出三个环形的结构，中间圆圈我使用伪元素实现。

<div class="chrome">
    <div class="chrome_part_color chrome_part_red"></div>
    <div class="chrome_part_color chrome_part_yellow"></div>
    <div class="chrome_part_color chrome_part_green"></div>
</div>

最重要的来了，写点样式，让页面丰富起来。主要利用定位，圆角，还有显示的层级来实现。在做一下溢出隐藏就OK。

*{
    margin:0;
    padding:0
}
.chrome {
    position:relative;
    width:300px;
    height:300px;
    overflow:hidden;
    border-radius:50%;
    margin:100px auto;
}

.chrome div {
    position:absolute;
}
/* 白色环带 */
.chrome::before {
    content:"";
    position: absolute;
    z-index:100;
    top:95px;
    left:95px;
    width:110px;
    height:110px;
    background:#fff;
    border-radius:110px;
    overflow:hidden;
}
/* 蓝色内核 */
.chrome::after {
    content:"";
    position: absolute;
    z-index: 101;
    top:105px;
    left:105px;
    width:90px;
    height:90px;
    border-radius:90px;
    background:linear-gradient(to bottom, #80B1DA, #165E98);
}
.chrome_part_color {
    width:200px;
    height:210px;
    opacity:0.94;
}
.chrome_part_red {
    z-index:3;
    top:-44px;
    left:55px;
    transform:rotate(60deg);
    border-bottom-right-radius:30px;
    background:radial-gradient(circle at 20% 30%,#ED5F51 20%,#DF2228 100%);
}
.chrome_part_yellow {
    z-index:5;
    top:95px;
    right:-30px;
    border-top-left-radius:30px;
    background:radial-gradient(circle at 30% 40%,#FDD207 100%,#DBA328 0%);
}
.chrome_part_green {
    z-index:7;
    top:82px;
    left:-25px;
    transform:rotate(117deg);
    border-top-left-radius:30px;
    background:radial-gradient(circle at 30% 40%,#4DB749 100%,#419643 0%);
}

这时，页面长这样.可以看出来，红色比较少。但是我调了好久的样式，要么红色遮住黄色，要么黄色遮住绿色，总得有一个优先级的。所以，此处我选择多引入一个div，来帮助我完成页面的绘制。

<div class="chrome_part_color chrome_part_red2"></div>

.chrome_part_red2 {
    z-index:9;
    width:160px;
    height:80px;
    top:50px;
    left:18px;
    transform:rotate(60deg);
    background:radial-gradient(circle at 30% 0,#ED5F51 30%,#DF2228 100%);
}

这时，页面就长成了这样。但是大家应该也注意到了，黑色的三角没有做到很还原，并且由于我多引入了一个div，红色这边的黑色三角已经消失了，对这块在进行一个完善吧。由于页面新增了结构，所以红色里面的黑色三角不是很好实现，就不做处理了。在这快说明一下黑色三角出来的原因，由于设置了透明度，三者的层级关系是递增的，所以会有一个黑色的阴影。为什么新增的页面结构不设置透明度，让红色的三角也出来，由于绿色背景在红色中显示还是偏绿色，所以还不如不设置。

<div class="chrome_mask_color chrome_mask_yellow"></div>
<div class="chrome_mask_color chrome_mask_green"></div>

.chrome_mask_color {
    width:110px;
    height:110px;
    background:#fff;
}
.chrome_mask_yellow {
    z-index:4;
    top:105px;
    right:-10px;
    transform:rotate(-12deg);
}
.chrome_mask_green {
    z-index:6;
    top:185px;
    left:38px;
    transform:rotate(15deg);
}

这个时候，效果是这样的。嗯，看着好了很多，也比较还原了。

完整代码如下：

使用css实现一个chrome Logo

前言