CSS锯齿线制作方法详解

利用CSS的 `repeating-linear-gradient` 可以巧妙地制作出锯齿形分割线，无需图片，性能更优。本文详细讲解了如何使用这一技术，通过控制颜色停止点和背景尺寸，模拟连续的三角形图案，实现视觉上的锯齿效果。关键在于理解 `background-size` 对锯齿大小的控制，以及 `repeating-linear-gradient` 角度对锯齿方向的影响。同时，文章还分享了避免内容重叠、设置 `background-color` 确保透明区域背景色正确显示等实用技巧，并提供了利用CSS变量和`calc()`函数进行优化，以及使用vw或vh单位实现响应式锯齿的方案。掌握这些技巧，你也能轻松创建美观且高性能的锯齿分割线。

使用repeating-linear-gradient制作锯齿形分割线的核心在于通过斜向渐变与背景尺寸控制生成重复的三角形图案。1. 锯齿大小由background-size定义，第一个值控制水平宽度，第二个值控制垂直高度；2. 锯齿方向由repeating-linear-gradient的角度决定，-45deg使尖端朝上，45deg使尖端朝下，结合background-position可定位锯齿在顶部或底部；3. 锯齿颜色通过渐变中的透明与实色段设置，transparent形成缺口，指定颜色如#f0f0f0或#3498db形成齿状部分；4. 实际应用中应避免内容重叠，推荐使用伪元素::after并配合position和padding留出空间；5. 必须设置background-color以确保透明区域显示正确背景色；6. 优化时可采用CSS变量统一管理颜色、尺寸，并结合calc()动态计算停止点；7. 为实现响应式效果，可用vw或vh单位替代px定义background-size，使锯齿随视口自适应缩放。该方法纯CSS实现，无需图片资源，性能高且易于维护，是创建锯齿分割线的理想方案。

CSS制作锯齿形分割线，核心技巧在于巧妙运用 repeating-linear-gradient。通过控制其颜色停止点和背景尺寸，我们可以模拟出连续的三角形图案，从而形成视觉上的锯齿效果。

解决方案

要实现锯齿形分割线，我们通常会利用一个元素的 background 属性，将 repeating-linear-gradient 作为背景图片。关键在于创建透明和实色交替的梯度，并且让这个梯度在特定方向上重复。

考虑一个简单的底部锯齿：

.sawtooth-bottom {
    width: 100%;
    height: 20px; /* 锯齿的高度 */
    background: linear-gradient(45deg, transparent 75%, #f0f0f0 75%) 0 50%,
                linear-gradient(-45deg, transparent 75%, #f0f0f0 75%) 0 50%;
    background-size: 20px 20px; /* 锯齿的宽度和高度 */
    background-repeat: repeat-x;
    background-position: 0 0; /* 确保图案从左侧开始 */
}

等一下，上面的例子是两个 linear-gradient 叠加，虽然也能实现，但如果我真的要用 repeating-linear-gradient 来做，并且更直接地体现它的优势，那应该是这样：

.sawtooth-bottom {
    width: 100%;
    height: 20px; /* 这个高度是留给锯齿的视觉空间 */
    background: 
        repeating-linear-gradient(
            -45deg, /* 决定锯齿方向 */
            transparent 0 50%, /* 前半部分透明 */
            #f0f0f0 50% 100% /* 后半部分实色 */
        );
    background-size: 20px 20px; /* 控制单个锯齿的宽度和高度 */
    background-position: 0 100%; /* 放置在底部，如果元素本身有高度 */
    /* 或者，更常见的是，用伪元素来承载 */
    position: relative;
    padding-bottom: 20px; /* 给伪元素留出空间 */
}

.sawtooth-bottom::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20px; /* 锯齿的实际高度 */
    background: 
        repeating-linear-gradient(
            -45deg, 
            transparent 0 50%, 
            #f0f0f0 50% 100%
        );
    background-size: 20px 20px; /* 锯齿的宽度和高度 */
}

上面的 repeating-linear-gradient 实际上是创建了一个斜向条纹。要形成锯齿，我们需要更精细地控制透明和实色的比例，并结合 background-size 来切割。

一个更典型的 repeating-linear-gradient 锯齿实现会是这样：

.sawtooth-divider {
    width: 100%;
    height: 20px; /* 锯齿的高度 */
    background-color: #fff; /* 锯齿的背景色，通常与父元素背景色相同 */
    background-image: 
        repeating-linear-gradient(
            -45deg, 
            transparent 0px, 
            transparent 10px, /* 透明部分，形成锯齿的“缺口” */
            #f0f0f0 10px, 
            #f0f0f0 20px /* 实色部分，形成锯齿的“齿” */
        );
    background-size: 20px 20px; /* 控制单个锯齿的宽度和高度 */
    background-position: 0 100%; /* 将锯齿放在底部 */
    /* 如果要放在顶部，则 background-position: 0 0; */
}

这个例子是制作一个底部带有锯齿的元素。background-image 中的 repeating-linear-gradient 会创建一系列斜向的透明和实色条纹。通过设置 background-size 为 20px 20px，我们确保每 20px 宽度和 20px 高度内，这个图案会重复一次。background-position: 0 100% 则将这个背景定位在元素的底部，使其看起来像是元素下方长出的锯齿。颜色 #f0f0f0 就是锯齿的颜色。

为什么repeating-linear-gradient是制作锯齿形分割线的理想选择？

在我看来，repeating-linear-gradient 在制作这种几何重复图案上，简直是为它量身定做的。它最大的优势在于其纯CSS的特性，这意味着你不需要额外的图片资源，也不用操心SVG的嵌入方式或者多层DOM元素的堆叠。这直接带来了几个好处：

首先，轻量级且高性能。一个简单的CSS属性就能搞定，浏览器渲染起来非常快，对页面加载速度几乎没有影响。相比于使用SVG或者背景图片，它省去了网络请求的开销。

其次，极高的可定制性与灵活性。通过调整 background-size，你可以轻松改变每个锯齿的宽度和高度。改变 repeating-linear-gradient 的角度（例如 -45deg 变为 45deg），锯齿的方向就会反转。调整颜色停止点（transparent 和 #f0f0f0 的百分比），可以控制锯齿的形状和尖锐程度。这种灵活性是其他方法难以比拟的，你几乎可以实时预览和调整，直到满意为止。

再者，完美的响应式表现。由于是纯CSS绘制，锯齿会根据其父元素的宽度自动拉伸或重复，无需额外处理响应式布局。如果你希望锯齿的大小也随视口变化，可以使用 vw 或 vh 单位来定义 background-size，这会带来非常流畅的缩放体验。

我个人觉得，它比伪元素配合 transform: skew() 或者 clip-path 更直观。用伪元素做，你可能需要考虑溢出、定位等问题，而 repeating-linear-gradient 就像是在画布上直接画图案一样，逻辑更清晰。

如何调整锯齿的大小、方向与颜色？

调整锯齿的视觉效果，主要就是围绕 repeating-linear-gradient 的几个关键参数和 background 属性展开。

调整锯齿的大小： 这主要通过 background-size 属性来控制。

• background-size: 20px 20px; 中的第一个值 20px 决定了单个锯齿的水平宽度（也就是一个完整锯齿图案的重复宽度）。
• 第二个值 20px 决定了锯齿的垂直高度（也就是锯齿的尖到谷的垂直距离）。 如果你想让锯齿更宽更扁，可以尝试 background-size: 30px 10px;。如果想让它更高更窄，就试试 background-size: 15px 30px;。

调整锯齿的方向： 这由 repeating-linear-gradient 中的角度参数决定。

• -45deg 会让锯齿的尖端朝上（如果你将它放在底部）。
• 45deg 则会让锯齿的尖端朝下。
• 如果你想在元素的顶部制作锯齿，并且希望尖端朝下，那么角度依然是 -45deg，但你需要调整 background-position 为 0 0。
• 更进一步，如果你想制作左右方向的锯齿，就需要将角度改为 to right 或 to left，并相应调整 background-size 和 background-position。

调整锯齿的颜色： 这直接在 repeating-linear-gradient 的颜色停止点中定义。 #f0f0f0 就是锯齿的实色部分。你可以将其替换为任何你想要的颜色，比如 red、#333 或者 rgba(0,0,0,0.8)。 transparent 则是锯齿“缺口”的颜色，通常我们会让它透明，这样就能透出其下方元素的背景色。如果你想让锯齿的“谷”也有颜色，可以把 transparent 替换成另一种颜色。

举个例子，一个顶部朝下的蓝色锯齿：

.blue-sawtooth-top {
    width: 100%;
    height: 25px; /* 锯齿高度 */
    background-color: #fff; 
    background-image: 
        repeating-linear-gradient(
            45deg, /* 角度改为45度，尖端朝下 */
            transparent 0px, 
            transparent 12.5px, 
            #3498db 12.5px, /* 蓝色 */
            #3498db 25px 
        );
    background-size: 25px 25px; /* 锯齿大小 */
    background-position: 0 0; /* 定位在顶部 */
}

在实际项目中应用锯齿形分割线有哪些常见误区和优化建议？

在实际项目中应用这种基于 repeating-linear-gradient 的锯齿分割线，我个人遇到过一些小坑，也总结了一些经验，希望能帮你少走弯路。

常见误区：

1. 高度与定位的混淆： 很多人会直接给承载锯齿的元素设置 height，然后把 background-position 设置为 0 100% 或 0 0。但如果这个元素本身还有内容，那么锯齿可能会与内容重叠。更稳妥的做法是将其应用于伪元素（::before 或 ::after），并给父元素留出足够的 padding 或 margin 空间，确保锯齿有自己的“领地”，不会侵犯内容。

2. background-color 的遗漏： 如果你的锯齿是透明与实色交替的，而你没有给承载锯齿的元素（或伪元素）设置一个 background-color，那么锯齿的透明部分会直接透出页面最底层的背景，这可能不是你想要的。通常，这个 background-color 应该与锯齿所在的区域的背景色保持一致，这样透明部分看起来就像是“镂空”了。

3. 响应式尺寸的硬编码： 如果你将 background-size 固定为 px 单位，那么在不同屏幕尺寸下，锯齿的相对大小可能会显得不协调。例如，在小屏幕上锯齿显得太大，在大屏幕上又太小。

优化建议：

1. 优先使用伪元素： 就像上面提到的，将锯齿效果应用到 ::before 或 ::after 伪元素上，是更干净、更少副作用的做法。这样可以将其与主内容分离，更容易控制其尺寸和定位。

   .section-with-sawtooth {
       position: relative;
       padding-bottom: 20px; /* 给锯齿留出空间 */
       background-color: #f9f9f9; /* 区域背景色 */
   }
   
   .section-with-sawtooth::after {
       content: '';
       position: absolute;
       bottom: 0;
       left: 0;
       width: 100%;
       height: 20px; /* 锯齿高度 */
       background-color: #f9f9f9; /* 与父元素背景色一致 */
       background-image: repeating-linear-gradient(-45deg, transparent 0 10px, #ccc 10px 20px);
       background-size: 20px 20px;
       background-position: 0 100%;
   }

2. 考虑使用CSS变量： 对于锯齿的颜色、高度和宽度，使用CSS变量（Custom Properties）可以大大提高可维护性。这样，如果你想在多个地方使用不同样式的锯齿，或者想快速调整所有锯齿的样式，只需修改变量的值即可。

   :root {
       --sawtooth-height: 20px;
       --sawtooth-width: 20px;
       --sawtooth-color: #f0f0f0;
       --sawtooth-bg-color: #fff;
   }
   
   .sawtooth-divider {
       height: var(--sawtooth-height);
       background-color: var(--sawtooth-bg-color);
       background-image: 
           repeating-linear-gradient(
               -45deg, 
               transparent 0px, 
               transparent calc(var(--sawtooth-height) / 2), 
               var(--sawtooth-color) calc(var(--sawtooth-height) / 2), 
               var(--sawtooth-color) var(--sawtooth-height)
           );
       background-size: var(--sawtooth-width) var(--sawtooth-height);
       background-position: 0 100%;
   }

   这里 calc() 的运用也很关键，它让颜色停止点能随着 --sawtooth-height 动态调整，保持锯齿形状的比例。

3. 响应式尺寸的解决方案： 对于 background-size，如果你希望锯齿的视觉大小在不同屏幕上保持相对一致，可以尝试使用 vw (viewport width) 或 vh (viewport height) 单位。例如 background-size: 5vw 5vw;。当然，这需要根据具体设计稿进行调整，可能需要媒体查询来微调不同断点下的 vw 值，以达到最佳效果。

总的来说，repeating-linear-gradient 在制作这种装饰性锯齿时，既强大又灵活。掌握其原理和一些实践技巧，能让你在设计中游刃有余。

好了，本文到此结束，带大家了解了《CSS锯齿线制作方法详解》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！