挑战！如何一行CSS实现花式条纹

难题

无论是在网页设计中还是杂志墙纸中，条纹总是无处不在。如何实现或者获取这些条纹呢？最简单的方法当时就直接切图，但其实可以直接CSS中创建丰富且美丽的条纹图案。

解决方案

第一次尝试

假设我们现在已经有一条基本的垂直线性渐变，颜色从 #fb3 过度到 #58a

 

这么美丽的图案用一句linear-gradient属性就可以实现！

background: linear-gradient(#fb3, #58a);

第二次尝试

现在我们可以进一步，将俩个色标拉得更近一些，添加第二个属性值 background: linear-gradient(#fb3 20%, #58a 80%);

 

这样就实现了容器顶部20%的区域被填充#fb3 底部20%的区域填充#58a 真正的渐变颜色只出现在容器虚线之间的60%的区域。 如果我们将参数设为40% 和 60% 那么相应的渐变区间就只有中间的20%了

突破性发现

如果我们将参数均分 也就是都为50%又是什么效果呢？ 一起见证一下！

 

那么其实这样就实现了俩条巨大的水平条纹

但是如果就是这样的话那也太贫乏了，我们加上background-size属性来调节尺寸

css复制代码background: linear-gradient(#fb3 50%, #58a 50%);
 background-size: 100% 60px;

 

background-size第一个参数设置宽度，第二个参数设置高度。 我们将俩条条纹单位总共设置为60px 那么每个就均分30px。由于背景在默认情况下时重复平铺的，整个容器其实已经被填满了水平条纹。

再次尝试

我们可以创建不等宽的条纹，只需调整色标的位置即可

css复制代码 background: linear-gradient(#fb3 20%, #58a 20%);
 background-size: 100% 60px;

 

总结计算方法就是：

第一个色素的高度 = background-size.height * percentage

第一个色素的高度 = background-size.height * (1 - percentage)

应用到上面的例子

#fb3的高度 = 60px * 20 % = 12px

#fb3的高度 = 60px * (1 - 20 %) = 48px

那么其实第二个色块百分之值就可以简化， 也可以实现同样的效果

css复制代码background: linear-gradient(#fb3 20%, #58a 0);
 background-size: 100% 60px;

如果按照这样的规则要实现三条条纹该怎么写？四条呢？

揭晓答案！

background: linear-gradient(#fb3 33.3%, #58a 0,#58a 66.6%, yellowgreen 0);

 

background: linear-gradient(#fb3 25%, #58a 0,#58a 50%,yellowgreen 0,yellowgreen 75%,red 0);

 

现在我们水平条纹已经写的很6了，那看看垂直条纹该如何实现呢

垂直条纹

垂直条纹其实就是增加一个参数来制定渐变的方向，同时background-size 也需要交换一下

css复制代码background: linear-gradient(to right,//或者90deg
  #fb3 33.3%, #58a 0,#58a 66.6%, yellowgreen 0);
 background-size: 60px 100% ;

 

那么顺着一想，如果我们想实现斜向条纹是不是改个角度比如45deg就可以实现呢

css复制代码background: linear-gradient(45deg,
  #fb3 50%, #58a 0);
 background-size: 30px 30px ;

 

看起来好像不太妙，其实单个贴片包是包含四条条纹，这样才能做到无线连接 ，因此我们需要加一些色带

css复制代码background: linear-gradient(45deg,
  #fb3 25%, #58a 0,#58a 50% ,
  #fb3 0,#fb3 75%, #58a 0);
 background-size: 30px 30px ;

 

但是可以观察其实这里的宽度并没有我们预想的30px，应该只是 (30 / 根号2)px, 如果想要条纹的宽度有30px 那么我们属性设置时 background-size: (30px * 根号2) (30px * 根号2) ;

但是如果想要倾斜30度或者60度其他的度数呢，如何保证预想的宽度值呢？

其实， 我们还有更好的办法来创造斜向条纹，一个比较鲜为人知的属性：repeating-linear-gradient()

css复制代码 background:repeating-linear-gradient(45deg,
   #fb3, #58a 30px);

 

那用这个属性如何实现上一个图像呢

css复制代码
background:repeating-linear-gradient(45deg,
   #fb3 0,#fb3 15px, #58a 0,#58a 30px);

 

灵活的同色系条纹

在大多数情况下，我们其实不需要对比性那么强烈的色差，我们需要的颜色往往属于同一色系，我们来看看接下来的这个图案：

css复制代码 background:repeating-linear-gradient(45deg,
   #79b 0,#79b 30px, #58a 0,#58a 60px);

 

图中可以看到条纹是由一个主色调#58a和它的浅色调组成的， 我们其实还有一个办法，就是把最深的颜色作为背景色，浅色的条纹叠加在背景色之上来得到图形:

css复制代码  background : #58a;
  background-image : repeating-linear-gradient(30deg,
  hsla(0, 0%, 100%, .1),
  hsla(0, 0%, 100%, .1) 30px,
  transparent 0, transparent 60px);

这样就可以实现上面一样的效果，虽然看起来代码量要多一些，但是现在只需要修改background颜色就又可以得到新的图案，还可以对不支持CSS渐变的浏览器起到回退的作用✨