CSSBattle专题-3（#6-#8）

Crizz
297 阅读4分钟

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

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

1. Battle #1 - Pilot Battle #6 - Missing Slice

  • 首先分析此题，总共抛开背景有三个元素，一般看到三个元素就可以联想到使用伪元素，因为刚好一个div就足够了

  • 那么这关的难点就只剩下如何利用CSS代码制作出直角扇形了，相信很多小伙伴都已经能够想出来了：border-radius属性，能够设置元素的圆角幅度

需要注意的是： 这个扇形虽然看起来也是圆的一部分，但是不能够直接写50%，因为这是需要吧div的两条边都变为圆角，所以圆角的尺寸应该等于div的宽度。这里的width是100px，所以直接设置为100px就行（当然写100%也可以，可以省去一个字符哈哈哈哈）

  • 另外可以利用简写形式：border-radius:100% 0 0;

  • 这样写只需要写三个参数，按照顺序含义分别是：左上角圆角、右上+左下圆角、右下圆角（这样又省下了几个字符hiahiahia）

话不多说上代码：

<div></div>
<style>
  body{
    margin:50px 100px;
    background:#E3516E
  }
 div,div::before,div::after{
   width: 100px;
   height: 100px;
   background:#51B5A9;
   border-radius:100% 0 0;
   position:absolute
  }
  div::before{
    content:'';
    background:#FADE8B;
    transform:translate(100px,0) rotate(90deg)
  }
  div::after{
    content:'';
    background:#F7F3D7;
    transform:translate(0,100px) rotate(-90deg)
  }

2. Battle #1 - Pilot Battle #7 - Leafy Trail

相信很多小伙伴看到这明显的三个元素，第一反应很快就想到了伪元素，然后就直接开码，首先我要恭喜你 ~ 因为你已经逐渐摸透了门路了……但是！你却忽略了一个重点：他们的形状大小都一样！没错！看到这个我们什么都不用说，肯定是用box-shadow，这么香的属性谁用谁知道~

注意：利用box-shadow属性生成的阴影，默认都是在元素的下方的，也就是说会被元素所盖住，因此在这里需要考虑好哪个叶子作为元素，哪个叶子作为阴影

代码：

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

3. Battle #1 - Pilot Battle #8 - Forking Crazy

  • 刚看到这个图案，一开始还觉得挺有意思的，但后面却越发觉得来者不善了

当然如果使用暴力解法直接一堆div往上怼肯定很容易就可以写出来，但是这样也就失去了练习的意义，所以花费了我好多事件去不断优化我的思路，为的就是用最少的代码实现最完美的效果

思路：

  1. 首先要做的当然是划分结构，也就是把这个叉子拆分成不同的部分，然后再逐个去实现，这里我把细长条（叉子尖端和把柄）与半圆结构（我也不知道叫啥）划分成两个部分；先作出一个圆形，然后再利用一根根长棍去盖住它，从而作出整根叉子，思路完美，开始实现~
  2. 对于这个圆，有些小伙伴很快哈！直接一个div就怼上去，结果就大意了。如果想要写出优雅的CSS代码，切记不能头脑一热就把脑子里的代码往上铺，一定要深思熟虑，我们要争取的就是使用尽量少的div。那么这个圆有没有办法不用div呢？当然有，就是我们之前提过的radial-gradient，一个能够实现渐变色过渡的方法，当然在CSSBattle网站里没有渐变色这种图案，所以一般只是被用来画圆，可以说是杀猪用牛刀了，但是用得实在是舒服！所以这里直接在body的背景画圆，就不需要占用一个div了。
  3. 接着就是解决这些“棍子”了，这里有一个小细节，就是他们的长度必须要比叉子的尖端长一点（具体的缘由你实操一下就知道了）。而且这里的“棍子们”都是同样的形状！没错box-shadow又来了，这一次它简直杀疯了！

代码：

<div></div>
<style>
  body{
    background:#6592CF;
    margin:50px 130px;
    background:radial-gradient(circle at 50% 60%,#060F55 70px,#6592CF 0)
  }
  div{
    width:20px;
    height:140px;
    background:#060F55;
    border-radius:20px;
    box-shadow:20px -30px #6592CF,
      		   40px 0 #060F55,
      		   60px -30px #6592CF,
      		   60px 150px #060F55,
      		   80px 0 #060F55,
      		   100px -30px #6592CF,
      		   120px 0 #060F55
  }

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

CSSBattle专题持续更新中~

avatar
文章
阅读
粉丝