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

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

1. Battle #3 - Cursor #19 - Cube

• 这一题我提供两种解题思路，其实小伙伴第一眼看到这个图案第一个想到的应该就是一个3D的立方体，但是我没记错的话CSSBattle这个网站的编译器是不支持3D效果的（小伙伴们也可以去试试），顺带一提，3D效果的实现只需要将容器的transform-style设置为preserve-3d，然后translate和rotate去设置每个面的位置即可

1. 第一种方法

依旧是比较简单粗暴的方法，即利用transform中的skew方法，这是一个专门用于生成平行四边形的方法

skew的语法：skew(ax[,ay])，两个参数分别控制x轴和y轴的倾斜角度

所以这个方法的思路也就很清晰了，先利用一个div加上rotate生成中间的黄色方块

然后利用两个伪元素加上skew生成上边的两个平行四边形

代码如下：

<div></div>
<style>
  body{
    background:#0B2429;
    margin:0;
  }
  div {
    width: 100;
    height: 100;
    background:#F3AC3C;
    transform:rotate(45deg);
    position:relative;
    top:135;
    left:150
  }
  div::before{
    content:'';
    position:absolute;
    width:71;
    height:71;
    background:#998235;
    transform:rotate(45deg) skew(45deg);
    top:-10;
    left:-60
  }
  div::after{
    content:'';
    position:absolute;
    width:71;
    height:71;
    background:#1A4341;
    transform:rotate(45deg) skew(-45deg);
    top:-60;
    left:-10
  }

2. 第二种方法

比较有技巧性，利用的是border和clip-path属性

• 首先需要利用border属性作出黄色方块的两个边框，这里用的是border-top和border-left，如图：

  

• 那么剩下的事情就简单明了了，就是利用clip-path将两边的角给“切掉”

  值得注意的是：这里的clip-path应写在body身上，因为div本身的content区域有限，没有办法切到border

<div></div>
<style>
  body{
    background:#0B2429;
    margin:0;
    clip-path:inset(0 130px)
  }
  div {
    width: 100;
    height: 100;
    background:#F3AC3C;
    transform:rotate(45deg);
    border-top:50px solid #1A4341;
    border-left:50px solid #998235;
    position:absolute;
    top:75;
    left:125
  }

2. Battle #3 - Cursor #20 - Ticket

• 相信如果看过我前面文章的小伙伴，部分人看到这一题里面内凹的圆时，都能够马上反应过来——可以用背景色radial-gradient实现，而另外一部分人看到这重复的圆形，又会马上想到box-shadow，所以这一题我们就用这两种思路分别来解题

1. 第一种方法

首先第一种我们用box-shadow

• 在做这种题时，我们都尽可能地让使用的div数量最小，所以这里如果我们为中间的方块占用一个div时，圆圈就可以利用伪元素
• 但是！我连伪元素都不想用！当然如果圆形是利用背景颜色实现的就不需要伪元素了，但是有没有一种办法，将方块用背景实现而圆形用div实现呢？答案当然是有滴！！！那就是利用body的背景（效果如图）

• 然后只需要利用box-shadow将圆形都补上即可
• 有同学可能要问了：那body的背景色不是还有外面那层紫色吗？难道背景色还能设置矩形形状的渐变？
• 我只能说：小了！格局小了！当然可能会有矩形渐变这种东东（我也不知道），但是这里外层的紫色，难道不是很像边框吗？所以我是利用body的border实现的紫色边框，然后在内容区利用之前有讲过的linear-gradient设置两个背景色
• 接下来的工作就简单了，只需要利用div+box-shadow实现多个圆形即可
• 相信这时候又有秀儿按捺不住了：我剩下的圆形也可以利用背景实现，这样还不用div！
• 我的回答是：可以是可以，但是没必要，六个圆相当于要用六次radial-gradient，这样还不如加个div然后利用box-shadow实在

最终代码如下：

<div></div>
<style>
  body{
    background:linear-gradient(to right,#F7EC7D 240px,0,#E38F66);
    border:100px solid #62306D;
    margin:0
  }
  div {
    width: 40;
    height: 40;
    border-radius:50%;
    position:absolute;
    top:80;
    left:80;
    background: #62306D;
    box-shadow:140px 0 0 -10px #62306D,
      		   200px 0 #62306D,
      		   0 100px #62306D,
               140px 100px 0 -10px #62306D,
      		   200px 100px #62306D
  }

2. 第二种方法

那就是规规矩矩地使用radial-gradient实现圆形的效果

<div></div>
<style>
  body{
    background:#62306D;
    margin:100
  }
  div {
	width:200;
    height:100;
    background: radial-gradient(circle at 0 0,#62306D 20px,0,transparent),
    			radial-gradient(circle at 0 100%,#62306D 20px,0,transparent),
        		radial-gradient(circle at 100% 0,#62306D 20px,0,transparent),
        		radial-gradient(circle at 100% 100%,#62306D 20px,0,transparent),
        		radial-gradient(circle at 140px 0,#62306D 10px,0,transparent),
        		radial-gradient(circle at 140px 100%,#62306D 10px,0,transparent),
      			linear-gradient(to right,#F7EC7D 140px,0,#E38F66)
  }

另外那种不用div的方法其实也推荐大家去写写看，毕竟练的越多也就越熟练~ 思路也都在第一种方法那里提供了~