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

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

1. Battle #4 - Display #21 - SitePoint Logo

对于这题本人也没有想出什么太简便的方法，只能直接暴力了（我还是太菜了o(╥﹏╥)o）

思路：

• 首先对图案进行拆分，看到这两个直角时当然不会想着去直接画出，而是选择将其拆分为两个方块，然后构成一个直角。
• 那么如果拆分成方块，就有重复的了，也就是说可以考虑box-shadow了，不过这里需要注意的是这里带圆角的方块不能使用box-shadow，因为他们对应的圆角的幅度不一样
• 至于之类对方块的定位，用position或者transform都可以，就看用哪种方法更容易确定坐标了，我这用了坐标轴不发生旋转的position

代码：

<div></div>
<style>
  body{
    background:#222
  }
  div{
    width:71;
    height:30;
    background:#F2994A;
    position:relative;
    transform:rotate(-45deg);
    top:75;
    left:137;
    box-shadow:-47px 100px #2D9CDB
  }
  div::after{
    content:'';
    position:absolute;
    width:30;
    height:80;
    background:#F2994A;
    border-radius:10px 0 5px 0;
    left:-29
  }
  div::before{
    content:'';
    position:absolute;
    width:30;
    height:80;
    background:#2D9CDB;
    border-radius:5px 0 10px 0;
    top:50;
    left:23
  }

2. Battle #4 - Display #22 - Cloud

思路：

• 看到这一题，我相信应该所有人都能够想出要用多个圆形去组成这朵云了，那么剩下的问题就是利用div还是背景呢？
• 首先我们需要关注到的是，这朵云的底部是直的，那么这个就需要div去实现了，即一个带小圆角的长div，带圆角是为了把右边的小圆一同实现
• 然后两个大圆就可以在body上用我们熟悉的radial-gradient来实现

代码：

<div></div>
<style>
  body{
    margin:165px 130px;
    background:radial-gradient(circle at 230px 135px,#D86F45 50px,0,transparent),
      		   radial-gradient(circle at 150px 165px,#D86F45 50px,0,transparent),
      		   #F5D6B4
  }
  div {
    width: 170px;
    height: 50px;
    border-radius:25px;
    background: #D86F45
  }

3. Battle #4 - Display #23 - Boxception

思路：

• 这一题可以说简单的不能再简单了，不管是暴力法div+两个伪元素，或是用box-shadow都能够轻易解决
• box-shadow的话需要用到我们之前提到过的阴影半径，从而控制阴影的大小

• 这里在使用box-shadow的时候唯一需要注意的就是，阴影部分会被div所覆盖，所以需要考虑好谁作阴影，谁作div

代码：

<div></div>
<style>
  body{
    background:#F3AC3C;
    margin:200px 150px
  }
  div {
    width: 50;
    height: 50;
    background: #F3AC3C;
    box-shadow:-25px -25px 0 25px #998235,
      		   25px -75px 0 75px #1A4341
  }

4. Battle #4 - Display #24 - Switches

本题我们提供两种思路：radial-gradient和box-shadow

思路一：

• 两个开关分别用一个div和一个伪元素代表

• 通过radial-gradient背景来实现开关的绘制，利用circle at来设置圆形的位置

代码：

<div></div>
<style>
  body{
    background:#62306D;
    margin:50px 80px
  }
  div{
    width:100;
    height:150;
    border-radius:50px;
    background:radial-gradient(circle at 50% 100px,#F7EC7D 50px,0,#AA445F)
  }
  div::after{
    content:'';
    position:absolute;
    width:100;
    height:150;
    border-radius:50px;
    background:radial-gradient(circle at 50% 50px,#F7EC7D 50px,0,#E38F66);
    top:100;
    left:220
  }

思路二：

• 利用div和伪元素作出其中一个开关，然后分别利用box-shadow来映射出另一个开关
• 注意这里也需要考虑阴影覆盖阴影的问题，即谁的阴影在上面

代码：

<div></div>
<style>
  body{
    background:#62306D;
    margin:50px 80px
  }
  div{
    width:100;
    height:150;
    border-radius:50px;
    background:#AA445F;
    box-shadow:140px 50px #E38F66
  }
  div::after{
    content:'';
    position:absolute;
    width:100;
    height:100;
    border-radius:50%;
    background:#F7EC7D;
    top:100;
    box-shadow:140px 0 #F7EC7D
  }