CSS 重复线性渐变之画格子

作者：南城FE

2022 年 7 月 18 日
本文字数：1925 字
阅读完需：约 6 分钟

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

前言

看到上面各种各样的格子，你会用什么方式实现呢？由于格子的大小间隙及方向多变，不能每次都创建很多的元素实现，那么就没有发挥到 CSS 的强大实力了，以上每个格子风格都只需要一个元素承载，剩下的交给 CSS 吧。

仔细看格子虽然有不同的形式，但是是有规律的重复的，比如第一个格子我们可以拆解为以下两块组成。

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

实现

CSS repeating-linear-gradient() 函数，用于创建重复的线性渐变 "图像"，基于此函数我们就可以画出格子的样式了。先看看语法：

background: repeating-linear-gradient(angle | to side-or-corner, 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%);}

复制代码

最后

看到最后是不是感觉很简单，赶紧试试看吧，画出属于我们程序员的各种格子效果出来吧。如果觉得有用，点赞，关注，收藏起来，说不定哪天就用上啦~

链接

Plaidish w/ Repeating Linear Gradients 🏁

发布于: 刚刚阅读数: 4

南城FE

关注

还未添加个人签名 2019.02.12 加入

专注前端开发，分享前端知识

发布

暂无评论

创作场景

CSS 重复线性渐变之画格子

前言

实现

整体代码

HTML

CSS

最后

链接

南城FE

评论