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

所有CSSBattle专题文章收录于专栏：CSSBattle专栏

1. Battle #1 - Pilot Battle #9 - Tesseract

这题是我很久之前做过的了，今天看了一下我之前的答案，血压飙升！！！

注：当时还不知道有radial-gradient或者linear-gradient这两种方法，只会个伪元素

当时的答案：

<div></div>
<style>
  body{
    margin:75px 0;
    background:#222730
  }
  div{
    height:150px;
    background:#4CAAB3
  }
  div:before{
    content:'';
    width:50px;
    height:50px;
    border-radius:50%;
    background:#393E46;
    position:absolute;
    top:125px;
    left:175px;
    z-index:1
  }
  div::after{
    content:'';
    width:150px;
    height:150px;
    background:#4CAAB3;
    outline:50px solid #222730;
    position:absolute;
    transform:rotate(45deg);
    left:125px
  }

所以果断全部删掉重新来过，首先分析一下：

• 先思考有没有什么能够利用body的背景直接画出的，我一眼就看到了这个中间这个长长的矩形哈，我的快乐回来了~直接一手linear-gradient（这个方法和之前讲过的radial-gradient类似，也是用于生成渐变色的，只不过这个是用于线性渐变，而radial-gradient是用于辐射型渐变，参数可以参考后者）
• 有同学可能会问，那中间哪个小圆不是也可以用背景画吗，可以是可以，但是会被上面的div挡住（这时候可能又会有杠精说那不是可以把div那一块的背景设为透明的吗？）
• 接着只需要处理中间的方块就行了，首先需要将方块的背景画出，还是利用我们的radial-gradient，再加一个border
• 最后只需要对div的位置和角度进行一个调整，利用transform的translate和rotate

代码：

<div></div>
<style>
  body{
    margin:75px 0;
    background:linear-gradient(#222730 75px,0,#4CAAB3 225px,0,#222730)
  }
  div{
    width:150px;
    height:150px;
    border:50px solid #222730;
    transform:translate(75px,-50px) rotate(45deg);
    background:radial-gradient(circle,#393E46 25px,0,#4CAAB3)
  }

注意： 在使用translate和rotate的时候，尽量先translate再rotate，因为rotate之后div的坐标体系也发生了旋转，再想精准定位就有点难度了

2. Battle #1 - Pilot Battle #10 - Cloaked Spirits

这幅图在以往做过的题中算是复杂的了，但是越复杂越需要冷静下来仔细分析：

1. 首先看有没有图案能够通过body的背景实现：如果将圆圈交由背景实现，那么为了使黄色方块不挡住背景，会有些许麻烦，所以这里我没有采用背景实现圆圈的方法（好吧我自己偷偷实现了一下，在下方会展示出来）
2. 这次我使用了两个div，一个用于画黄色背景方块，一个用于画圆圈（其实利用伪元素的话一个div就可以了，但其实最后你会发现代码量相差无几，因为利用伪元素的话还要设置content之类的）
3. 注意中间的黄色方块较长，所以在设定.bg这个div的高度时要使其能够满足中间的高度，而两边的可以利用边界将其“斩断”
4. 最后就只需要实现圆圈了，这么多圆圈，当然要使用box-shadow啦，只是他们大小不一样，也能使用吗？答案是肯定的

MDN上明确说明了，box-shadow在设置偏移量后面还可以设置两个半径，一个是模糊半径，一个是扩散半径，因为我们这里不需要模糊，所以第三个参数直接为0，而扩散背景则可以控制阴影的大小，所以这里将第四个参数设置为20px，意为阴影半径相对于原本的元素增大20px

<div class="circle"></div>
<div class="bg"></div>
<style>
  body{
    background:#62306D;
    margin:0
  }
  .bg{
    width:100px;
    height:200px;
    background:#F7EC7D;
    margin:200px 50px;
    box-shadow:100px -100px #F7EC7D,
      		   200px 0 #F7EC7D
  }
  .circle{
    position:absolute;
    width:60px;
    height:60px;
    border-radius:50%;
    background:#E38F66;
    box-shadow:200px 0 #E38F66,
      		   200px 0 0 20px #AA445F,
      		   0 0 0 20px #AA445F,
      		   100px -100px #AA445F,
      		   100px -100px 0 20px #E38F66;
    bottom:70px;
    left:70px
  }

下面就是利用背景实现圆圈的代码实现啦~（有更好的想法也欢迎提出）

<div></div>
<style>
  body{
    background: radial-gradient(circle at 200px 100px,#AA445F 30px,0,#E38F66 50px,0,transparent),
        		radial-gradient(circle at 100px 200px,#E38F66 30px,0,#AA445F 50px,0,transparent),
        		radial-gradient(circle at 300px 200px,#E38F66 30px,0,#AA445F 50px,0,#62306D);
    margin:100 150
  }
  div{
    width:100;
    height:200;
    background:radial-gradient(circle at 50% 0,transparent 50px,0,#F7EC7D)
  }
  div::before{
    content:'';
    width:100;
    height:100;
    background:radial-gradient(circle at 50% 0,transparent 50px,0,#F7EC7D);
    position:absolute;
    left:50;
    bottom:0
  }
    div::after{
    content:'';
    width:100;
    height:100;
    background:radial-gradient(circle at 50% 0,transparent 50px,0,#F7EC7D);
    position:absolute;
    right:50;
    bottom:0
  }

唯一需要注意的点就是为了不挡住圆圈，黄色方块的背景色那一块需要设置为transparent透明

3. Battle #1 - Pilot Battle #11 - Eye of Sauron

这个图案唯一的难点，相比就是两边的半环形了，其实他这里使用了一点障眼法，很多人看第一眼都以为它的元素中心点应该是在圆环圆心。但其实这里可以使用一个小技巧，这里唯一的难点就是怎么去只截这个半圆，其实此时答案已经很明朗了，就是直接用div的下边界去截啊

• 先画出中间的三层圆环，这里可以直接为中间的div设置背景，利用radial-gradient方法画出三层圆环
• 紧接着就是两边的半圆环了，同样也是利用radial-gradient，但是需要额外设定圆心的起始位置，写在circle后面，中间用 at 链接。如果希望圆心在X边的中心，可以直接设50%，而如果希望圆心在Y边的最顶部，则直接设为0

话不多说，上代码：

<div></div>
<style>
  body{
    margin:80px 130px;
    background:#191210
  }
  div{
    width:140px;
    height:140px;
    background:radial-gradient(#84271C 25px,0,transparent 50px,0,#ECA03D 70px,0,transparent)
  }
  div::before,div::after{
    width:100px;
    height:100px;
    content:'';
    position:absolute;
    background:radial-gradient(circle at 50% 0,#191210 30px,0,#ECA03D 50px,0,transparent);
    top:150px;
    left:50px
  }
  div::after{
    transform:rotate(180deg);
    top:50px;
    left:250px
  }

3. Battle #1 - Pilot Battle #12 - Wiggly Moustache

相信很多小伙伴看到这幅图的瞬间是崩溃的，CSS还能花波浪线？？？

莫慌，千万不要被表象所欺骗，做CSSBattle上的题最大的乐趣就是利用各种各样的元素去拼凑出不同的图案

• 所以这条“波浪线”明显也是可以拼凑出来的，细心的小伙伴应该能够看出，它其实是通过三个半圆环以及两端的两个小圆形组成的，只要能够将其组成部分分析好，顿时这道题就迎刃而解了
• 首先是半圆环，在上一题我们已经实现过了，就是通过在div的边界设置圆形背景，通过div的边界来切割圆环实现的
• 而这里有三个圆环，所以就该使用伪元素了，只需要通过transform来对伪元素进行平移及翻转即可
• 然后就该解决这两个小圆形了，伪元素已经用完了，难道需要在来个div了吗？可以是可以，但是没必要！千万不要忘记我们还有body的背景没有用呢！在这里也不需要担心背景被盖住的问题，因为刚好都在div的边界，只会盖住下半圆，但是我们需要的刚好只是上半圆，一切恰到好处~

代码：

<div></div>
<style>
  body{
    background:radial-gradient(circle at 20%,#D86F45 10px,0,transparent),
      		   radial-gradient(circle at 80%,#D86F45 10px,0,#F5D6B4)
  }
  div,div::before,div::after{
    width:100px;
    height:100px;
    content:'';
    position:absolute;
    background:radial-gradient(circle at 50% 0,#F5D6B4 30px,0,#D86F45 50px,0,transparent)
  }
  div{
    top:150px;
    left:70px
  }
  div::before{
    transform:translate(80px,-100px) rotate(180deg)
  }
  div::after{
    transform:translate(160px)
  }

注意： 这里不能够使用box-shadow来进行半圆环的赋值，因为box-shadow是对整个元素的投影，如果在这里使用阴影，它投射出来的将是个正方形，而且哪怕是圆形也无法实现圆环，因为圆环是背景，千万不要被表象所欺骗了！！！

---

哈喽！这里是Crizz的前端之旅~

CSSBattle专题持续更新中~