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方案

以上方法可根据实际需求组合使用，实现不同风格的锯齿效果。