使用CSS圆锥渐变创建背景图案

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

本文翻译自 How to create background pattern using CSS & conic-gradient作者 Temani Afif 略有删改。

拥有一个好的背景图案可以使你的网站设计与众不同。多亏了CSS渐变我们可以使用几行代码创建花哨炫酷的图案。在这篇文章中我们将学习conic-gradient并使用它来创建不同的CSS图案。

圆锥梯度如何工作

圆锥渐变从指定圆心开始类似于径向渐变不同之处在于圆锥渐变色标放置在圆的圆周周围而不是从圆心出现的直线上从而使颜色在围绕圆心旋转时平滑过渡而不是从圆心向外过渡。

这是MDN页面上的一张图:

举一个基本的例子来看看它是如何工作的

background: conic-gradient(at 75% 25%, red, blue, yellow)

我们将中心点放置在X=75%和Y=25%处然后在红色蓝色和黄色之间创建颜色过渡。

在大多数情况下我们不需要平滑的过渡而是不同的颜色值。要做到这一点我们需要使颜色从上一个结束的地方开始

background: conic-gradient(at 75% 25%, red 90deg, blue 90deg 225deg, yellow 225deg)

注意两种颜色90deg和225deg之间使用相同的角度。代码可以进一步优化就像下面这样。

background: conic-gradient(at 75% 25%, red 90deg, blue 0 225deg, yellow 0)

通过指定0小于前一个值浏览器将自动使其等于前一个值。这样可以避免我们两次写入相同的值。最终的效果如下

和上面的效果图保持有相同的中心点但没有颜色之间的过渡效果。红色填充90deg。蓝色从红色结束的地方开始一直持续到225deg所以它填充了135deg。黄色填充了剩余的135deg空间。

如果我们定义一个background-size我们就创建了一个图案

这不是一个好看的图案效果但说明了我们将在本文中使用的技术来构建更好的图案效果

棋盘图案

我们从一个基本图案开始

下面的图来理解这种模式的逻辑

可以看到我们的圆心被放置在背景区域的中心默认位置所以我们不需要定义它。然后我们有4种颜色2白2黑每种颜色填充90deg区域比例为25%。代码为

background: conic-gradient(#000 90deg, #fff 0 180deg, #000 0 270deg, #fff 0);

继续优化语法使用重复渐变代码:

background: repeating-conic-gradient(#000 0 90deg, #fff 0 180deg);

我们也可以用百分比来代替度数:

background: repeating-conic-gradient(#000 0 25%, #fff 0 50%);

我们要做的就是更新background-size来控制图案显示格子的比例。

background-size: 100px 100px;

Z字形图案

接下来我们创建一个更花哨的图案效果这次我们将使用两个渐变。

此效果中我们将学习from选项该选项允许我们控制渐变的旋转。

在上面的例子中每个渐变都由两种颜色组成。第一种颜色填充90deg而第二种颜色填充剩余的空间。两种渐变之间的唯一区别是旋转。第一渐变旋转-45deg而第二渐变旋转135deg。

这两个梯度加在一起会给予下面的结果。

上面的1对应的代码如下

background:
  conic-gradient(from -45deg,#ECEDDC 90deg,#0000   0),
  conic-gradient(from 135deg,#ECEDDC 90deg,#29AB87 0);
background-size: 100px 100px;

这不是我们想要的结果。为了得到我们想要的结果我们需要移动第二个渐变代码如2所示以获得以下代码

background:
  conic-gradient(from -45deg,#ECEDDC 90deg,#0000   0),
  conic-gradient(from 135deg,#ECEDDC 90deg,#29AB87 0) 50px 0;
background-size: 100px 100px;

50px 0只是第二梯度的background-position50px是background-size的一半。

可以通过引入CSS变量进一步优化代码

--s: 100px; 
  
--_g: #ECEDDC 90deg,#0000 0;
background:
  conic-gradient(from -45deg,var(--_g)),
  conic-gradient(from 135deg,var(--_g)) calc(var(--s)/2) 0,
  #29AB87;
background-size: var(--s) var(--s)

图纸图案

这个图案我们将使用两个类似的梯度但这次有不同的大小。除了background-position我们还将看到使用background-size也可以帮助我们创建图案。

第一梯度定义如下

设置100px后的background-size最终效果如下

第二个渐变是相同的但不是2px 2px我们使用1px 1px来拥有更细的线条我们将大小除以5。这将给予我们一个更大的正方形内的小正方形5x5网格的逻辑结果。

background: 
 conic-gradient(from 90deg at 2px 2px,#0000 90deg,#366 0) 0 0/100px 100px,
 conic-gradient(from 90deg at 1px 1px,#0000 90deg,#366 0) 0 0/20px  20px;

使用CSS变量的优化代码

--s: 100px; 
  
--_g: #0000 90deg,#366 0;
background: 
 conic-gradient(from 90deg at 2px 2px,var(--_g)) 0 0/var(--s) var(--s),
 conic-gradient(from 90deg at 1px 1px,var(--_g)) 0 0/calc(var(--s)/5) calc(var(--s)/5);

三角形图案

在这三个简单的图案之后我们可以使用相同的技术来处理更复杂的图案效果接下来创建一些三角形图案。

对于这个图案效果可以分解以下的渐变代码

与Z字形图案类似我们使用background-position的第二个梯度的偏移以获得以下代码

--s: 120px;
  
background:
  conic-gradient(from 150deg at 50% 33%,#FA6900 60deg,#0000 0) 
      calc(var(--s)/2) calc(var(--s)/1.4),
  conic-gradient(from -30deg at 50% 66%,#D95B43 60deg,#ECD078 0);
background-size: var(--s) calc(var(--s)/1.154);