在 CSS 中绘制千鸟格图案

Source: Dev.to

介绍

我把千鸟格图案和童年联系在一起——记得小时候到处都能看到它，后来却逐渐消失了。从 CSS 的角度来看，这种图案其实相当简单，只需要两个渐变即可：

• 圆锥渐变 – 生成白色和黑色的方块图案。
• 重复线性渐变（或普通线性渐变） – 绘制对角线。

为了方便起见，定义一个自定义属性来控制尺寸，这样只需修改一个值即可调整图案大小。

CSS 实现

body {
  --size: 100px;                     /* Adjust this value to change the pattern size */
  background-size: var(--size) var(--size);
  background-image:
    conic-gradient(#fff 25%, #0000 0 50%, #000 0 75%, #0000 0),
    repeating-linear-gradient(
      135deg,
      #fff 0 12.5%,
      #000 0 25%,
      #fff 0 37.5%,
      #000 0 62.5%
    );
}

工作原理

• --size 控制图案每个重复单元的宽度和高度。
• conic-gradient 创建千鸟格经典的棋盘方块。
• repeating-linear-gradient 在 135° 角度上添加对角的“齿”线。

演示

Video generating the pattern in real time with CSS.

(Insert video embed or link here.)

这就是使用 CSS 绘制千鸟格图案的方法。 :)