乐趣区

关于css3:CSS重复线性渐变之画格子

jiezi

正式开始文章前，先看图，看到以下图片你会想到什么呢？是不是程序员的标配来了，格子衫。没错，明天的内容就是用 CSS 画格子。

前言

看到下面各种各样的格子，你会用什么形式实现呢？因为格子的大小间隙及方向多变，不能每次都创立很多的元素实现，那么就没有施展到 CSS 的弱小实力了，以上每个格子格调都只须要一个元素承载，剩下的交给 CSS 吧。

认真看格子尽管有不同的模式，然而是有法则的反复的，比方第一个格子咱们能够拆解为以下两块组成。

这样看是不是就清晰多了，咱们只须要写入多个条纹笼罩在一起即可。
怎么实现条纹的款式呢？那就进入到咱们文章的正题。

实现

CSS repeating-linear-gradient() 函数，用于创立反复的线性突变 “ 图像 ”，基于此函数咱们就能够画出格子的款式了。先看看语法：

background: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);
参数名 形容
angle 定义突变的角度方向。从 0deg 到 360deg，默认为 180deg。
side-or-corner 指定线性突变的起始地位。由两个关键字组成：第一个为指定程度地位(left 或 right)，第二个为指定垂直地位（top 或 bottom）。程序是随便的，每个关键字都是可选的。
color-stop1, color-stop2,… 指定突变的起止色彩，由色彩值、进行地位（可选，应用百分比指定）组成。

那么咱们下面第一幅图片的款式就能够按上面的写法:

background: repeating-linear-gradient(#8ae8ff80 0 17%, transparent 0 28%);

留神点，每一个后续的反复的条纹的起止地位要蕴含上一个条纹的地位，不然就会呈现突变色彩。两幅图联合的格子款式最终 repeating-linear-gradient 代码如下：

 background:repeating-linear-gradient(to right, #998aff80 0 16%, transparent 0 28%), repeating-linear-gradient(#8ae8ff80 0 17%, transparent 0 28%);

整体代码

HTML

<div class="patterns"> 
  <div class="plaid"> </div>
  <div class="plaid"> </div>
  <div class="plaid"> </div>
  <div class="plaid"> </div>
  <div class="plaid"> </div>
  <div class="plaid"> </div>
  <div class="plaid"> </div>
  <div class="plaid"></div>
</div>

CSS

$white:#ffffff80; //white
$clr1:#998aff80; //purple
$clr2:#8ae8ff80; //baby blue
$clr3:#fffeb580; //yellow
$clr4:#ff6eff50; //pink
$clr5:#9cffe480; //green
$clr6:#ffd49c80; //orange
$clr7:#ff8a8d80; //red
$clr8:#3850eb50; //blue

*{
  margin:0;
  box-sizing:border-box;
}

body{
  height:100vh;
  display:flex;
  align-items:center; 
  justify-content:center;
}

.patterns {
  height:100%;
  width:100%;
  display:grid;
  grid-template-columns: repeat(4,1fr);
  border:15px solid white;
  
}
.plaid {margin:15px;}
// plaid styles counter clockwise
.plaid:nth-child(1){background:repeating-linear-gradient(to right, $clr1 0 16%, transparent 0 28%), repeating-linear-gradient($clr2 0 17%, transparent 0 28%);
}

.plaid:nth-child(2){background: repeating-linear-gradient(45deg, transparent 0 8%, $clr3 0 14%),repeating-linear-gradient(-45deg, $white 0 6%, $clr4 0 14%), repeating-linear-gradient(-45deg, transparent 0 2%, $clr8 0 4%);
}

.plaid:nth-child(3){background:repeating-linear-gradient($clr5 0 5%, transparent 0 13.6%) ,repeating-linear-gradient(to right, $clr6 0 10%, $white 0 13.6%);
  
}
.plaid:nth-child(4){background: repeating-linear-gradient(45deg, $clr7 0 3%, transparent 0 6%),repeating-linear-gradient(-45deg, $clr8 0 3%, $white 0 6%);
}

.plaid:nth-child(5){background: repeating-linear-gradient(45deg, transparent 0 10%, $clr5 0 12%),repeating-linear-gradient(-45deg, transparent 0 12%, $clr7 0 20%), linear-gradient(45deg, transparent 0 10%, $clr2 0 25%, transparent 0 45%, $clr2 0 55%, transparent 0 70%, $clr2 0 100%) ;
}

.plaid:nth-child(6){background:repeating-linear-gradient(to right, $white 0 15%, $clr5 0 45%), repeating-linear-gradient(transparent 0 15%, $clr8 0 45%), 
    repeating-linear-gradient(to right, transparent 0 20%, $clr8 0 25%);;
}

.plaid:nth-child(7){background: repeating-linear-gradient(45deg, $clr2 0 5%, transparent 0 15%),repeating-linear-gradient(-45deg, $clr4 0 12%, $white 0  25%),repeating-linear-gradient($clr2 0 12%, $white 0 25%);
}

.plaid:nth-child(8){background: repeating-linear-gradient( to right, $white 0 10%, transparent 0 20%),repeating-linear-gradient($clr2 0 7%, transparent 0 10%),linear-gradient(to right, $clr8 0 70%, $clr6 0 100%);
}

最初

看到最初是不是感觉很简略，连忙试试看吧，画出属于咱们程序员的各种格子成果进去吧。如果感觉有用，点赞，关注，珍藏起来，说不定哪天就用上啦~

专一前端开发，分享前端相干技术干货，公众号：南城大前端（ID: nanchengfe）

链接

Plaidish w/ Repeating Linear Gradients 🏁

退出移动版