1. Battle #2 - Visibility #13 - Totally Triangle

这一题，我想提供三种思路，当然一种更比一种强~

第一种：利用transform

这道题我们很容易能够看出他是一个body背景加上一个三角形，那么这个三角形怎么来呢？

最容易想到的肯定就是将div进行旋转，然后利用边缘对其进行覆盖，从而实现三角形的绘画

废话不多说，上代码：

<div></div>
<style>
  body{
    background:#0B2429
  }
  div{
    width:250;
    height:250;
    background:#F3AC3C;
    transform:rotate(45deg) translate(-214px,0px)
  }

注意： 这种方法其实细心的小伙伴在对比最终效果的时候会发现，还是有一点偏差的，不过这个偏差很明显没有被检测出来，不过也是因为像素不能设置小数，否则这个偏差也可以消除

第二种：利用border

这种画三角形的方法是每一位前端程序员必备的技能，在面试中的出现率也是极高！

具体的利用border画出各种三角形的方法我也有相关的文章进行整理，传送门：---------

代码：

<div></div>
<style>
  body{
    background:#0B2429;
    margin:0
  }
  div{
    width:0;
    height:0;
    border: 70px solid #F3AC3C;
    border-right: 70px solid transparent;
    border-bottom:70px solid transparent
  }

第三种：利用linear-gradient

这种方法能够想到的都说明对CSS的掌握程度非常扎实了，当然这个犯法我们在之前也已经讲过了

可以用于创建一种或多种颜色渐变组成的背景图片，当然也可以通过参数设置为不渐变

同时在这一题中，我们还利用到了他的另一个参数，就是渐变延伸的角度，这个参数写在方法中的第一个参数位置

注意： 如果此参数不写，则默认的渐变方向为从上到下（这个也无需硬背，需要用到时测试一下就行了）

<style>
  body{
    background:linear-gradient(135deg,#F3AC3C 100px,0,#0B2429)
  }

所以第三种方法无疑是最简洁最优雅的，虽然同上面两种方法一样，都会有一点肉眼可见但是检测不到的小偏差，这种解法最大的亮点便是不需要用到div，极大程度地简化了代码！

2. Battle #2 - Visibility #14 - Web Maker Logo

有一说一这题我真没想到什么更好的解题思路，如果有小伙伴有更加优雅的方式，欢迎在评论区探讨~

首先这题有重复的元素，相信很多小伙伴第一反应都是box-shadow，但是我能想到的方法用box-shadow都行不通，后面会解释为什么行不通~
其次就是伪元素的问题，这一题我是直接4个div元素的，没有用伪元素，因为感觉代码量差不了多少，所以就没用了，小伙伴们也可以试试看伪元素如何写，并且代码量是不是更加简短呢
唯一的难点就是如何画出三角形，如果按上一题的思路，只有第三种：border法在这里能够起作用，只不过需要注意把控好div的宽高，但是其实还有另一种方法可以画出三角形，而且这种方法什么图形都可以画出，如果在上面有进这个传送们的小伙伴应该知道，那就是clip-path这个属性，用于裁剪元素的显示区域，而且也可以自定义切割路径，所以能画的可远不止三角形

先来第一种：border

<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<style>
  body{
    margin:0;
    background:#F2F2B6
  }
  div{
    position:absolute;
    top:85px;
    width: 0;
    height: 0;
    border:75px solid transparent
  }
  .a{
    z-index:1;
    left:60px;
    border-top:130px solid #FF6D00
  }
  .b{
    left:80px;
    border-top:130px solid #FD4602
  }
  .c{
    top:10px;
    z-index:1;
    left:170px;
    border-bottom:130px solid #FD4602
  }
  .d{
    top:10px;
    left:190px;
    border-bottom:130px solid #FF6D00
  }

当然上面的代码还有很多可以简化的地方，我自己在复盘的时候也发现了许多，小伙伴们也可以试试简化一下（比如代码中的z-index就完全可以省略，只需要改一改a和b的顺序即可）

然后就是第二种：clip-path

<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<style>
  body{
    margin:0;
    background:#F2F2B6
  }
  div{
    position: absolute;
    top:85;
    left: 60;
    width: 150;
    height: 130
  }
  .a,.b{
    background:#FF6D00;
    clip-path:polygon(0 0,50% 100%,100% 0);
  }
  .a{
    background:#FD4602;
    left:80
  }
  .c,.d{
    background:#FD4602;
    clip-path:polygon(50% 0,0 100%,100% 100%);
    left:170
  }
  .c{
    background:#FF6D00;
    left:190
  }

这第二种方法的代码虽然只比第一种简化了一点点，但是clip-path的潜力还远不止如此，他的强大之处的等待各位小伙伴去慢慢发掘

现在来解释一下为什么box-shadow行不通：

如果是用border，在设置阴影时，他会默认将所有的border算在内，所以阴影始终是完整的div形状大小，并不是三角形
如果是用clip-path，由于它切割的是显示区域，所以在切割范围以外的内容不会显示，包括阴影

3. Battle #2 - Visibility #15 - Overlap

思路：

首先需要将图中的图案进行拆分，可以拆分为左右两个圆以及中间的橄榄形
唯一的难点便是中间的橄榄形如何实现呢？这里刚好就可以利用我们上一题讲到的clip-path中的circle方法，可以设置切割的圆心位置

代码：

<div></div>
<style>
  body{
    background:#09042A;
    margin:75px
  }
  div,div::before{
    width:150px;
    height:150px;
    border-radius:50%;
    background:#7B3F61;
    box-shadow:100px 0 #E78481
  }
  div::before{
    content:'';
    position:absolute;
   	background:#09042A;
    clip-path:circle(50% at 175px 50%)
  }

你以为到这就结束了吗？当然没有！这里我再提供一种box-shadow的进阶用法：inset

这是个可选参数，当你在属性中填写该参数，代表将阴影反向，此时阴影并不在你定义的坐标点处，而是显示在元素内部，除开与你原本定义的阴影的交集的区域（这可能不太好理解，建议不懂的小伙伴亲手写写代码试一下）

<div></div>
<style>
  body{
    background:#09042A;
    margin:75px
  }
  div {
    width:150px;
    height:150px;
    border-radius:50%;
    box-shadow:100px 0 #7B3F61 inset,100px 0 #E78481
  }

不得不说，合理利用好box-shadow的这个进阶用法，省了不少事~

哈喽！这里是Crizz的前端之旅~

CSSBattle专题持续更新中~

CSSBattle专题-5（#13-#15）

1. Battle #2 - Visibility #13 - Totally Triangle

2. Battle #2 - Visibility #14 - Web Maker Logo

3. Battle #2 - Visibility #15 - Overlap