1. Battle #7 - Backface #39 - Sunset

看到这一题的第一印象就是他的条纹形状图案了，第一反应就是box-shadow，但是仔细一看就会发现他的两边是一个圆弧
因此需要在其外部包裹一个容器，并且设置border-radius使其为圆形
然而再仔细观察便又会发现，上下还有小圆的两个部分，因此如果利用border-radius实现大圆，就必须设置其上下位置的背景色为透明，才能保证不遮挡小圆的部分
确实利用linear-gradient方法能够顺便将透明部分以及中间的条纹部分一同实现，但是代码量之大可想而知
因此这里又要用到我们还不是很熟悉的clip-path属性了，将外部的div容器的长宽设置成条纹部分的长宽，自然就不会遮挡小圆部分
然后左右两边的圆弧通过clip-path实现，利用其中的circle方法
同时这里的条纹我并不是利用背景色实现的，而是通过设置容器的子元素div，因为其间隙都是相同的，所以可以利用我们的flex布局，再讲justify-content设置为space-evenly让间隙部分均匀分布即可

代码如下：

<div class="a">
  <div></div>
  <div></div>
  <div></div>
</div>
<style>
  body{
    background:radial-gradient(circle,#998235 100px,0,#1A4341);
  }
  .a{
    display:flex;
    margin:80px 67px;
    width: 250;
    height: 140;
    background: #1A4341;
    flex-direction:column;
    justify-content:space-evenly;
    clip-path:circle(125px);
  }
  .a div{
    width:250;
    height:20;
    background:#F3AC3C
  }

2. Battle #7 - Backface #40 - Letter-B

第一眼看到这一题的小伙伴可能会被吓到：这一会直一会弯的图形怎么实现啊？
Relax！这里就是对大家拆分元素技巧的考验了
首先我们可以看到图中的四分之三圆环以及一个小矩形，这个矩形很好实现，但是这个四分之三圆环呢？好像目前无法一蹴而就，那么就可以考虑一下利用遮挡来实现了，通过对一整个圆环左上角的遮挡来实现四分之三圆环的绘制
至于怎么遮挡呢，我们能否在绘制左边小矩形的同时实现对圆环的遮挡呢，当然可以！可以通过小矩形的有边框来实现！！

代码如下：

<div></div>
<style>
  body{
    background:radial-gradient(circle,#6592CF 50px,0,#243D83 100px,0,#6592CF)
  }
  div {
    width: 50;
    height: 100;
    background: #243D83;
    margin:50px 92px;
    border-right:50px solid #6592CF
  }

3. Battle #7 - Backface #41 - Fox Head

这一题属实被整破防了（当然一大原因是因为明天要期末考试了），非常多的细节需要考虑，最主要的就是上下链各个圆弧了，因为除了圆弧外各自还有一小段直线（最后我也没有完美实现，但是看他100%过了就不想管了）
这一题原本是用radial-gradient实现的，但是最后一直都卡在99.99%，就换了一种思路
采用的是box-shadow，这题中的所有圆形都可以通过一个圆形的box-shadow来实现，所以一开始想的还是很方便的（没想到最后发现自己还是太年轻了）

不多说了上代码吧，这个代码个人觉得非常不满意，写的非常冗杂，都是经过修修补补的代码，希望考完试再来仔细研究一下吧

<div></div>
<style>
  body{
    background:#293462;
    margin:115px 150px
  }
  div{
    width:100;
    height:100;
    background:#FE5F55;
  }
  div::after{
    content:'';
    position:absolute;
    width:80;
    height:80;
    border-radius:50%;
    background:#293462;
    left:120;
    top:180;
    box-shadow: 20px -65px 0 -25px #293462,
      			60px -65px 0 -25px #293462,
      			80px 0 #293462,
      			0 -100px #FE5F55,
      			80px -100px #FE5F55
  }
  div::before{
    content:'';
    position:absolute;
    width:100;
    height:100;
    background:#293462;
    z-index:1;
    right:50;
    top:60;
    box-shadow: -200px 0 #293462,
      			-10px 120px #293462,
      			-190px 120px #293462
  }

CSSBattle专题-14（#39-#41）

1. Battle #7 - Backface #39 - Sunset

2. Battle #7 - Backface #40 - Letter-B

3. Battle #7 - Backface #41 - Fox Head