1. Battle #7 - Backface #36 - Interleaved

思路：

这题的思路其实也很简单，看到这种重复的元素，我们想到的第一个办法当然就是box-shadow了
但是这时候可能会有人要说了：这里上下的图形是翻转过来的，不是不可以用box-shadow了？

兄弟格局小了，谁说他们是翻转过来的（doge）

既然他们刚好在边缘，那我们何不直接利用好这一特点呢？
没错就是利用边缘去进行对元素的遮挡，这样就能够利用box-shadow去实现啦
利用好这一特点我们就只需要定义一个div，然后仅通过box-shadow就完美实现了五个长条

代码：

<div></div>
<style>
  body{
    background:#1A4341
  }
  div {
    position:absolute;
    width: 50;
    height: 225;
    background: #F3AC3C;
    border-radius:25px;
    bottom:-25;
    left:25;
    box-shadow:150px 0 #F3AC3C,
      		   300px 0 #F3AC3C,
      		   75px -125px #998235,
      		   225px -125px #998235
  }

2. Battle #7 - Backface #37 - Tunnel

思路一：

自古以来，如果有多个思路，那么第一个思路毋庸置疑都是暴力解法，这次也一样
图中有三个方块，所以我们利用div和两个伪元素分别设置长宽和rotate属性来实现
唯一需要注意的地方就是旋转过后的坐标如何确定，当然也可以先确定坐标再进行旋转，会省很多事
代码如下：

<div></div>
<style>
  body{
    background:#6592CF
  }
  div,div::before,div::after{
    content:'';
    position:absolute;
    top:25;
    left:75;
    width: 250;
    height: 250;
    background: #243D83
  }
  div::before{
    transform:rotate(15deg);
    background:#6592CF;
    width:150;
    height:150;
    top:50;
    left:50
  }
  div::after{
    transform:rotate(30deg);
    width:75;
    height:75;
    top:88;
    left:88
  }

思路二：

第二个思路的总体流程其实与暴力解法类似
这里我们会用到我们经常会忽略的一个元素：body
首先最外两层的方块，我们完全可以利用body以及border来实现
但是这个方法属于花里胡哨派的，我写出来后发现评分反而比暴力解法还低了，所以这个思路二只是提供一个比较新奇的思路
代码：

<div></div>
<style>
  body{
    width:250;
    height:250;
    border:75px solid #6592CF;
    background:#243D83;
    margin:-50 0
  }
  body::before,body::after{
    content:'';
    position:absolute;
    width:150;
    height:150;
    background:#6592CF;
    top:75;
    left:125;
    transform:rotate(15deg)
  }
  body::after{
    width:75;
    height:75;
    background:#243D83;
    top:113;
    left:163;
    transform:rotate(30deg)
  }

3. Battle #7 - Backface #38 - Not Simply Square

这一题一看题目：Not Simply Square，来者不善啊，那么到底是有多不简单呢，再仔细一看图案，你会发现其实也还好，不过是虚张声势

思路一：

首先先来个暴力法伺候
将每个部分分开来，蓝色用body的背景实现，黄色和红色的方块则用div+伪元素实现，暴力法还是如此直接粗暴
深红色的部分可以通过border，也可以通过linear-gradient来实现
代码：

<div></div>
<style>
  body{
    background:#293462;
    margin:0
  }
  div {
    width: 200;
    height: 200;
    background: #FFF1C1
  }
  div::before,div::after{
    content:'';
    position:absolute;
    width:100;
    height:150;
    background:#FE5F55;
    border-bottom:50px solid #A64942
  }
  div::before{
    left:200
  }
  div::after{
    transform:rotate(270deg);
    left:50;
    top:150
  }

思路二：

再来一个比较巧妙的方法：box-shadow
细心的小伙伴应该都发现了，这个图案其实是可以通过多个方块的重叠遮盖形成的，因此我们就可以使用我们的阴影来实现啦~
唯一需要注意的就是我们的层级优先级
代码：

<div></div>
<style>
  body{
    background:#293462;
    margin:0
  }
  div{
    width:200;
    height:200;
    background:#FFF1C1;
    box-shadow: 200px 200px #293462,
      			125px 125px 0 -25px #A64942,
      			0 0 0 100px #FE5F55
  }

从第二种思路的代码我们可以发现，有时候选择一条正确的路真的可以省很多事！box-shadowYYDS！！！

CSSBattle专题-13（#36-#38）又是被box-shadow征服的一天~

1. Battle #7 - Backface #36 - Interleaved

2. Battle #7 - Backface #37 - Tunnel

3. Battle #7 - Backface #38 - Not Simply Square