css制作锯齿
使用 CSS 制作锯齿效果
方法一：使用线性渐变
通过 CSS 的 linear-gradient 可以创建锯齿边缘效果。以下是一个示例代码：
.sawtooth {
height: 100px;
background: linear-gradient(45deg, transparent 33.33%, #000 33.33%, #000 66.66%, transparent 66.66%),
linear-gradient(-45deg, transparent 33.33%, #000 33.33%, #000 66.66%, transparent 66.66%);
background-size: 20px 40px;
}这段代码会创建一个 45 度角的锯齿图案。调整 background-size 可以改变锯齿的大小和密度。
方法二：使用伪元素和边框
利用伪元素和 CSS 边框属性也能实现锯齿效果：
.sawtooth-border {
position: relative;
height: 50px;
background: #f0f0f0;
}
.sawtooth-border::after {
content: "";
position: absolute;
bottom: -10px;
left: 0;
width: 100%;
height: 20px;
background: linear-gradient(
to right bottom,
#f0f0f0 50%,
transparent 50%
), linear-gradient(
to left bottom,
#f0f0f0 50%,
transparent 50%
);
background-size: 20px 20px;
background-repeat: repeat-x;
}方法三：使用 SVG 背景
SVG 提供了更精确的锯齿控制：
.sawtooth-svg {
height: 100px;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><polygon points="0,20 10,0 20,20" fill="%23000"/></svg>');
background-size: 20px 20px;
}方法四：使用 clip-path
现代 CSS 的 clip-path 属性可以实现更复杂的锯齿形状：
.sawtooth-clip {
height: 100px;
background: #000;
clip-path: polygon(
0% 100%,
5% 0%,
10% 100%,
15% 0%,
20% 100%,
25% 0%,
30% 100%,
35% 0%,
40% 100%,
45% 0%,
50% 100%,
55% 0%,
60% 100%,
65% 0%,
70% 100%,
75% 0%,
80% 100%,
85% 0%,
90% 100%,
95% 0%,
100% 100%
);
}注意事项
- 锯齿的大小可以通过调整渐变的角度或重复背景的尺寸来改变
- 颜色值可以替换为任何需要的颜色
- 对于响应式设计，考虑使用相对单位如 vw 或百分比
- clip-path 方法可能需要考虑浏览器兼容性
这些方法可以单独使用，也可以组合应用，根据具体需求选择最合适的实现方式。
