css制作锯齿

CSS制作锯齿效果

使用CSS创建锯齿效果可以通过多种方法实现，以下是几种常见的技术：

伪元素方法

通过::before或::after伪元素创建锯齿边缘：

.element {
  position: relative;
  height: 100px;
  background: #f06;
}

.element::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  right: 0;
  height: 20px;
  background: linear-gradient(
    45deg,
    transparent 33.33%,
    #f06 33.33%,
    #f06 66.66%,
    transparent 66.66%
  );
  background-size: 20px 20px;
}

线性渐变方法

直接在主元素上应用渐变背景：

.serrated-edge {
  height: 100px;
  background: 
    linear-gradient(135deg, #f06 25%, transparent 25%) -10px 0,
    linear-gradient(225deg, #f06 25%, transparent 25%) -10px 0,
    linear-gradient(315deg, #f06 25%, transparent 25%),
    linear-gradient(45deg, #f06 25%, transparent 25%);
  background-size: 20px 20px;
}

SVG背景方法

使用SVG作为背景图像创建更精确的锯齿：

.svg-serrated {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='10'><polygon points='0,0 20,0 10,10' fill='%23f06'/></svg>");
  background-repeat: repeat-x;
  height: 100px;
}

clip-path方法

使用CSS clip-path属性裁剪出锯齿形状：

.clip-path-serrated {
  height: 100px;
  background: #f06;
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% calc(100% - 10px),
    50% 100%,
    0% calc(100% - 10px)
  );
}

参数调整建议

• 锯齿大小：通过调整背景尺寸或SVG尺寸改变锯齿大小
• 锯齿密度：修改重复频率或渐变角度控制密度
• 锯齿方向：改变渐变角度或clip-path点位置调整方向
• 锯齿锐度：调整渐变颜色停止点或SVG形状改变锐度

这些方法可以根据具体需求组合使用，创建各种不同的锯齿效果。现代CSS特性如mask-image和shape-outside也可以用于实现更复杂的锯齿形状。