css制作锯齿
CSS 制作锯齿效果
使用 CSS 制作锯齿效果可以通过多种方法实现，以下是几种常见的技术方案：
使用 linear-gradient 背景渐变
通过 CSS 的 linear-gradient 可以创建锯齿状的边缘效果。这种方法适用于容器底部或顶部的锯齿设计。
.sawtooth {
height: 100px;
background: linear-gradient(45deg, transparent 33.333%, #f00 33.333%, #f00 66.667%, transparent 66.667%),
linear-gradient(-45deg, transparent 33.333%, #f00 33.333%, #f00 66.667%, transparent 66.667%);
background-size: 20px 40px;
}调整 background-size 可以控制锯齿的大小和密度。
使用 clip-path 裁剪路径
clip-path 属性允许通过多边形路径裁剪元素，形成锯齿形状。
.sawtooth-clip {
height: 100px;
background-color: #f00;
clip-path: polygon(
0% 0%,
100% 0%,
100% 70%,
50% 100%,
0% 70%
);
}通过调整 polygon 的坐标点可以自定义锯齿的形状和深度。
使用伪元素和 transform
通过 ::before 或 ::after 伪元素结合 transform 旋转，生成重复的锯齿。
.sawtooth-pseudo {
position: relative;
height: 100px;
background: #f00;
overflow: hidden;
}
.sawtooth-pseudo::after {
content: "";
position: absolute;
bottom: -10px;
left: 0;
width: 100%;
height: 20px;
background: linear-gradient(45deg, #f00 25%, transparent 25%) -50px 0,
linear-gradient(-45deg, #f00 25%, transparent 25%) -50px 0;
background-size: 20px 20px;
}SVG 内联背景
将 SVG 作为背景图像嵌入，实现高精度的锯齿效果。
.sawtooth-svg {
height: 100px;
background-color: #f00;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><path d='M0,0 L10,20 L20,0' fill='%23f00'/></svg>");
background-size: 20px 20px;
}这种方法支持复杂的锯齿设计，且缩放时不会失真。
注意事项
- 锯齿的锐利度可以通过调整角度或路径点控制。
- 对于响应式设计，使用相对单位（如
vw或%）确保锯齿比例适配不同屏幕。 - 某些方法（如
clip-path）可能需要浏览器前缀以确保兼容性。
以上方法可根据具体需求选择，渐变方案适合简单锯齿，而 clip-path 和 SVG 适合更复杂的形状。
