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

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

1. Battle #7 - Backface #33 - Birdie

这一题唯一需要思考的就是如何将图中的各个元素给拆分开来，因为扇形和半圆形对于我们来说都已经不是难事了

• 不难想到，我们应该拆分成两个部分，左边的半圆和小圆为一部分，右边的扇形为一部分，前者可以通过背景颜色来同时实现两个图形
• 其次就是扇形的实现，我用的是背景的radial-gradient，当然也可以使用border-radius来实现，只需要将右上角的圆角幅度设置为200%即可

代码如下：

<div></div>
<style>
  body{
    background:#1A4341
  }
  div, div::before{
    position:absolute;
    width: 200;
    height: 150;
    top:0;
    right:0;
    background:radial-gradient(circle at 0 100%,#F3AC3C 100px,0,#1A4341)
  }
  div::before{
    content:'';
    width:75;
    top:75;
    right:200;
    border-radius:75px 0 0 75px;
    background: radial-gradient(circle at 60% 30%,#0B2429 15px,0,#998235)
  }

2. Battle #7 - Backface #34 - Christmas Tree

刚看到这一题时，我们的第一反应就是，画三角形！那么如何画三角形？——毫无疑问就是利用border属性了，这个技能也是每个前端程序员必备的，利用border属性来实现多种三角形的绘制。

当然除了利用border，还有一种更加硬核的方法，就是clip-path，没错！这个属性终于要第一次出现在我们的CSSBattle中了！！！所以这题我将会分别展示两种方法

方法一（border）：

思路：

• 看到这里有三个三角形，那当然要用到伪元素啦~注意这里可不能用box-shadow，因为我们的边框实际上可不止下下边框，至于为什么，看了代码就知道啦 ~
• 所以这里就利用到伪元素，并且需要注意他们的层级关系，谁覆盖谁

代码：

<div></div>
<style>
  body{
    background:#007065
  }
  div,div::before,div::after{
    content:'';
    position:absolute;
    top:150;
    left:75;
    width: 0;
    height: 0;
    border-left:125px solid transparent;
    border-right:125px solid transparent;
    border-bottom:100px solid #00A79D
  }
  div::before{
    border-bottom:100px solid #FFEECF;
    left:-125;
    top:-100;
    z-index:1
  }
  div::after{
    border-bottom:100px solid #F5C181;
    top:-50;
    left:-125;
    z-index:0
  }

方法二（clip-path）：

思路：

• 首先讲讲clip-path的作用吧，就是能够将一个元素进行裁剪，通过设置其属性值可以裁剪成任何你想要的形状
• 所以这里就可以之间将div元素裁剪成圣诞树的形状，因为这个形状并不难裁剪，利用我们的多边形polygon即可，其参数是不同点的坐标值
• 而背景色只需要设置一个线性渐变即可

<div></div>
<style>
  body{
    background:#007065;
    margin:50px 75px
  }
  div{
    width:250;
    height:200;
    background:linear-gradient(#FFEECF 100px,0,#F5C181 150px,0,#00A79D);
    clip-path:polygon(0 100%,25% 75%,0 75%,25% 50%,0 50%,50% 0,100% 50%,75% 50%,100% 75%,75% 75%,100% 100%)
  }

这里我再给大家推荐一个网站，可以自动生成裁剪的路径： https://bennettfeely.com/clippy/

3. Battle #7 - Backface #35 - Ice Cream

这一题也是挺简单的了，并没有什么特殊的图案，顶多只有一些圆角

• 上面的“雪糕”部分就直接用一个div加上border-radius属性就可以实现了
• 下面的“雪糕棒”就用伪元素实现，至于其颜色的变化，我们可以利用linear-gradient实现，当然还有另外一种方法，我这里用的是border属性，即设置其顶部的边框为深红色即可

代码：

<div></div>
<style>
  body{
    background:#293462
  }
  div {
    position:absolute;
    top:50;
    left:calc(50% - 50px);
    width: 100;
    height: 150;
    background: #FFF1C1;
    border-radius:50px;
    border-bottom-left-radius:20px;
    border-bottom-right-radius:20px
  }
  div::after{
    content:'';
    position:absolute;
    width:30;
    height:50;
    background:#FE5F55;
    top:150;
    left:calc(50% - 15px);
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
    border-top:10px solid #A64942;
    box-sizing:border-box
  }