css制作锯齿
CSS制作锯齿效果
使用CSS可以轻松创建锯齿效果，常见方法包括伪元素、线性渐变和SVG背景。以下是几种实现方式：
伪元素法
通过::before或::after伪元素创建锯齿边缘：
.element {
position: relative;
height: 100px;
background: #3498db;
}
.element::after {
content: "";
position: absolute;
bottom: -10px;
left: 0;
width: 100%;
height: 20px;
background: linear-gradient(
45deg,
#3498db 25%,
transparent 25%
), linear-gradient(
-45deg,
#3498db 25%,
transparent 25%
);
background-size: 20px 20px;
}线性渐变法
利用重复线性渐变模拟锯齿：
.element {
height: 100px;
background:
linear-gradient(135deg, #3498db 25%, transparent 25%) -10px 0,
linear-gradient(225deg, #3498db 25%, transparent 25%) -10px 0,
linear-gradient(315deg, #3498db 25%, transparent 25%),
linear-gradient(45deg, #3498db 25%, transparent 25%);
background-size: 20px 20px;
}SVG背景法
使用SVG创建更精确的锯齿图案：
.element {
height: 100px;
background: #3498db;
mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><path d="M0 0 L10 0 L5 10 Z" fill="black"/></svg>');
mask-size: 10px 10px;
}clip-path法
通过裁剪路径实现自定义锯齿形状：
.element {
height: 100px;
background: #3498db;
clip-path: polygon(
0% 0%, 100% 0%, 100% 80%,
90% 100%, 80% 80%, 70% 100%,
60% 80%, 50% 100%, 40% 80%,
30% 100%, 20% 80%, 10% 100%, 0% 80%
);
}注意事项
- 锯齿大小通过调整
background-size或SVG尺寸控制 - 颜色需与主背景色保持一致
- 考虑浏览器兼容性，特别是
clip-path和mask-image - 对于复杂形状，建议使用SVG方案
以上方法可根据实际需求组合使用，实现不同风格的锯齿效果。
